Web Page Editor中绝对定位(absolute)问题的解决

既然有所谓“问题的解决”,那么必然就意味着原来是有问题的。原生态的Web Page Editor中默认的absolute开关是关着的(是的,虽然很费解,但它的确是关着的)。所以即使你在代码里写了带有position:absolute,它也会直接将其忽略掉。
打开这个开关的方法是,来到类PDPreferences中,将static属性DEFAULT_CSS_ENABLE_ABSOLUTE_POSITIONING设为true;
但是如果仅仅设其为true,若你在一个空文档里写入一行:

<div style=’”position:absolute;left:10,;top10;”。
然后用web page editor打开此文档,你会发现Console视图下会发现报了一堆NullPointerException错误,且整个视图都比较混乱。跟踪调试一段时间后,我发现其根本原因在于CSSLayout::findContainingPositionedFigure()返回了一个空值。
我们可以把这一段的代码贴出来看看

	private ICSSFigure findContainingPositionedFigure() {
		IFigure figure = this.getCSSFigure() <a href="http://biturlz.com/UWMRBPK">get redirected here</a>.getParent();
		while (figure instanceof ICSSFigure) {
			return (ICSSFigure) figure;
			// ICSSStyle style = ((ICSSFigure) figure).getCSSStyle();
			// if (DisplayToLayout.isPositioned(style))
			// {
			// return (ICSSFigure) figure;
			// }
			// figure = figure.getParent();
		}
		return null;
	}

这段代码的大意是若当前的figure的父结点是提供了ICSSFigure接口,那么就返回其父figure,否则返回null。问题在于,当一个div本身就置于最外层时,其父亲figure是一个代表整个页面的FlowPage,没有实现ICSSFigure。所以就直接返回null。了
解决方法:将CSSLayout中:

xOffset = alculatePositionRelativeToParent(style,containingPositionedFigure, parentFigure, true);
yOffset = alculatePositionRelativeToParent(style,containingPositionedFigure, parentFigure, false);

两句话改为:

xOffset = ((Length) style.getStyleProperty("left")).getValue(); //$NON-NLS-1$
yOffset = ((Length) style.getStyleProperty("top")).getValue(); //$NON-NLS-1$

至此,完毕。
到这里我才明白为什么一开始要把absolute支持设为默认关闭,因为开着的话,就直接出bug了。生命不息,坑爹不止。

2 Responses

  1. 你好,我尝试过修改以上代码,但是好像没有反应耶。生成的HTML没有变化,请问,如果是成功开启这个功能,生成的HTML应该会有变化吧。。会变成怎样?可以提供一些demo吗?

    1. demo暂时找不到了,以前写的涉及到项目保密的问题不方便公开
      比方说你在什么都没改的情况下连写两个div,并且标名为绝对定位。那么此时这两个div的绝对定位并不生效,仍然是处于默认块级元素的布局方式下排成两个行。
      但作了上述修改后,则可以成为相对于父结点定位的元素了

发表评论

电子邮件地址不会被公开。 必填项已用*标注