关于在IE浏览器中，文档模式为"杂项"即Quirks，position为absolute且页面有滚动条时设置right的问题...

最新推荐文章于 2021-05-31 07:33:53 发布

weixin_33811539

最新推荐文章于 2021-05-31 07:33:53 发布

阅读量188

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/linzm1990/p/4096750.html

版权

　　由于系统的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的时候，对页面的样式及布局还是有很大的影响的。

　　比如：

　　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");