多浏览器开发需要注意的问题之三

7、页面绝对定位的问题Position：absolute

产生的问题：时间控件在ipad下被遮挡，然后我们去掉style="Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: 0px"，但是会出现另外一个问题：页面在FF、Chrome、Safari下会有纵向滚动条。

分析原因：先看Position属性在CSS2.0 HandBook上的解释：

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。当设定position:absolute 如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。

当设定position: relative则 参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY 的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。一 般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会 应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是 无法用z-index来设定上下关系的，一定是子级在上父级在下。

设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间 而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空 间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。其实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。

解决方法：开始的时候，发现日历控件会被覆盖掉，于是去掉Position属性，然后测试，发现日历控件没有被覆盖掉，但是同时出现了另一个问题，页面出现了纵向滚动条，即使页面中的元素没有充满整个页面，也会出现纵向滚动条，于是又把position：absolute加上，果然滚动条就没有了。最后就在日历控件上下功夫，发现页面加上position：absolute后，会出现层叠的效果，但是显示的效果是依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数，然后就将日历控件的z-index属性设置为9999，那么日历控件会一直在最上层，也不会出现页面不必要的纵向滚动条了。

8、window.open()打开子页面，父页面关闭，子页面的window.opener在IE下还是存在的，是一个空对象。

分析原因：由于Ipad不支持window.showModelDialog的方式打开子页面，所以我们就采用window.open的方式打开子页面，然后在关闭子页面的时候，如果有返回值我们会回调父页面的方法去接收返回值，然后我们写的判断语句是这样的

function(returnValue) {

if (window.opener

&& window.opener.currentCall) {

if (window.opener.currentCall.backCaller) {

window.opener.currentCall.backCaller(returnValue);

}

}

window.close();

},

发现在FF，Chrome，Safari下是没有问题的，可是在IE下，会报JS错误，调试了一下发现window.opener.currentCall.backCaller报错了，然后看了一下发现window.opener和window.opener.currentCall都是空的object，所以验证出现了错误。

解决方法：在调试代码的时候发现window.opener.currentCall的类型在IE是unknown，在FF，Chrome，Safari下window.opener为undefined，所以这个方法改为这样：

function(returnValue) {

if (window.opener

&& typeof window.opener.currentCall !== "unknown"

&& window.opener.currentCall) {

if (window.opener.currentCall.backCaller) {

window.opener.currentCall.backCaller(returnValue);

}

}

window.close();

},

9、FireFox取dropdownlist取不到值

分析原因：查看代码发现在页面中取dropdownList的选中值的写法是这样的

Var selectedValue = document.all.drpProject.options(i).value;在FF下是取不到值的。

解决方法：将取值的方法改一下就可以了，将圆括号改为方括号。

selectedValue = document.all.drpProject.options[i].value;

10、window.dialogArguments在Firefox下刷新后丢失的问题

分析原因：在培训模块的选人页面中，发现在Firefox下查询的人员是错误的，究其原因是没有把父页面的绩效方案的ProjectID传到子页面，查看代码发现页面中是这样取父页面的ProjectID的

var oDocument = window.dialogArguments;

projectID = oDocument.all.drpProject.options[oDocument.all.drpProject.selectedIndex].value;

上网查询了一下得出这样的结论：window.dialogArguments;在Firefox下也是支持的，只是在页面刷新后，window.dialogArguments会丢失。

解决方法：在FireFox下可以用window.opener.document去取父页面的Document，但是在IE下如果采用window.showModelDialog的方式打开子页面，是找不到window.opener的，所以我们将取父页面的值的方法改为：

var oDocument;

if ($.browser.msie) {

oDocument = window.dialogArguments;

}

else {

oDocument = window.opener.document;

}

11、attachEvent和onpropertychange事件只能在IE下使用

分析原因：为了控制文本框和下拉列表框的输入，在前台加了给服务器控件添加onpropertychange事件，代码是这样写的：

function onPageLoad()

{

//改变方案后做清空和disable保存button

_attachEventCheckProject(document.all.drpProject);

//验证输入的分数

_attachEventCheckscore(document.all.txtScore);

}

function _attachEventCheckProject(objInputBox) {

objInputBox.attachEvent("onpropertychange", checkProject);

}

function _attachEventCheckscore(objInputBox) {

objInputBox.attachEvent("onpropertychange", CheckScore); }

但是发现在非IE浏览器下是不起作用的，上网查询了一下，是这样说的：

a、 addEventListener是DOM2里面标准的方法，也是被多数浏览器支持的，IE除外，IE的模型使用的是attachEvent。

b、 onpropertychange能够捕获每次输入值的变化。例如：<INPUT id="test" name="test" />对象的value值被改变时，onpropertychange能够捕获每次改变，而onchange需要执行某个事件才可以捕获。onpropertychange 不被firefox所支持，如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。

解决方法：由于IE和其他浏览器有差别，那么就将上面的添加控件属性改变的方法改为：

function _attachEventCheckProject(objInputBox) {

if (window.addEventListener) { // Mozilla, Netscape, Firefox

objInputBox.addEventListener("change", checkProject,false);

} else { // IE

objInputBox.attachEvent("onpropertychange", checkProject);

}

}

function _attachEventCheckscore(objInputBox) {

if (window.addEventListener) { // Mozilla, Netscape, Firefox

objInputBox.addEventListener("input", CheckScore, false);

} else { // IE

objInputBox.attachEvent("onpropertychange", CheckScore);

}

}