首页 > 代码库 > 关于在IE浏览器中，文档模式为"杂项"即Quirks，position为absolute且页面有滚动条时设置right的问题
关于在IE浏览器中，文档模式为"杂项"即Quirks，position为absolute且页面有滚动条时设置right的问题
由于系统的html页面没有指定相应的DTD，即<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，而是直接写<html><head></head><body></body></html>，导致在IE中的文档模式为“杂项（Quirks）”。
文档模式为Quirks的时候，对页面的样式及布局还是有很大的影响的。
比如：
<div id="tabPanel" style="display:none">
<ul class="tableTab">
<li class="more right"><a href="javascript:showOrHideMoreTabs(‘tabPanel‘);"><p></p></a></li>
</ul>
</div>
<div id="tabMore">
<ul>
</ul>
</div>
tabMore是一个隐藏的块，当tabPanel块里面的li超过指定的宽度之后，会把超过的li放到这个块里面，然后通过点击class="more"的li来展示更多的内容。
tabMore的显示位置一般与<li class="more">右齐且在其下方。
如此showOrHideMoreTabs()方法里面应该有
$("#tabMore").css("top", moreT + "px");
$("#tabMore").css("right", moreR + "px");
这样设置之后，你会发现，当IE的文档模式为“Quirks”的时候，不会与<li class="more">右齐而是偏左（页面存在滚动条）。
经过一番探索，初步认定是滚动条的影响（文档模式为“杂项”时，从滚动条的左边开始计算），于是从网上摘抄了一个计算滚动条宽度的例子：
var _scrollBarWidth = null;
function getScrollBarWidth(){
if (_scrollBarWidth) {
return _scrollBarWidth;
}
var scrollBarHelper = document.createElement("div");
scrollBarHelper.style.cssText = "overflow:scroll;width:100px;height:100px;";
document.body.appendChild(scrollBarHelper);
if (scrollBarHelper) {
_scrollBarWidth = {
horizontal: scrollBarHelper.offsetHeight - scrollBarHelper.clientHeight,
vertical: scrollBarHelper.offsetWidth - scrollBarHelper.clientWidth
};
}
document.body.removeChild(scrollBarHelper);
return _scrollBarWidth;
}
所以在showOrHideMoreTabs()方法里面设置top和right，修改为：
$("#tabMore").css("top", moreT + "px");
if($.browser.msie && !$.boxModel){
moreR -= getScrollBarWidth().horizontal;
$("#tabMore").css("right", moreR + "px");
}else{
$("#tabMore").css("right", moreR + "px");
}
这样tabMore的位置设置就可以正常显示了。
关于在IE浏览器中，文档模式为"杂项"即Quirks，position为absolute且页面有滚动条时设置right的问题