关于在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的位置设置就可以正常显示了。

  

  

  

时间: 2024-07-30 10:12:00

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

X-UA-Compatible IE 浏览器默认文档模式设置

制作网页的时候,IE8浏览器浏览页面的时候,有时候文档模式默认是IE7,导致IE8兼容性不是非常好.出现IE7应该出现的模式. 解决的方法例如以下: 在X-UA-Compatible中可用的方法有: <meta http-equiv="X-UA-Compatible" content="IE=5" > <meta http-equiv="X-UA-Compatible" content="IE=7" >

360浏览器遇到文档模式是IE7的解决办法

这段时间遇到了360浏览器在加载java项目时,默认的文档模式是IE7,使得网页加载下拉框出现问题. 解决的方法是: 在显示的jsp页面加上 <meta http-equiv="X-UA-Compatible" content="IE=edge"> <head> <title></title> <meta http-equiv="X-UA-Compatible" content="I

浅谈HTML文档模式

不知道爱多想的你有没有在编写HTML代码时思考过 <!DOCTYPE html> 或是这一长串看都看不懂的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 的代码,它是做什么的,为什么要有这句话,这句话起什么作用,它和其他HTML代码有关吗?嘤嘤嘤我才不回告诉你在前端的面试题中会经常看到对这个知识点的提问,而我

【IE】浏览器模式与文档模式 及其开发中处理方式

原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下: 浏览器模式(Browser Mode),用于切换IE针对该网页的默认文本模式.对不同版本浏览器的条件注释解析.决定请求头里userAgent的值.它在浏览器发出请求之前就已经确定,网站没有办法修改这个值.它代表的是用户以何种浏览器访问网站. 文本模式

html中设置默认的浏览器文档模式

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><TITLE>${systemConfig.getStringConfigValue("webtitle")}——登陆</TITLE><meta name="description" content=""

ie浏览器f12下调“浏览器模式”和“文档模式”的区别

废话不多说了,进入正题 一,浏览器模式 “浏览器模式”用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给网站服务器的用户代理(User-Agent)字符串的值.网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,这样就可以向不同的浏览器返回不同的页面内容. 二,文档模式 “文档模式”用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码.切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载

如何使浏览器打开时,默认的文档模式就是标准模式

请看下方: 第一步,将代码设置成html5的模式,那么用户打开项目之后,文档模式就是标准的:即不会是ie5Qurik模式:但有可能是ie7标准模式: 第二步, 2.1 在html head中写上这句代码,即可时文档模式为你浏览器最高级别的模式:<meta http-equiv="X-UA-Compatible" content="IE=edge" />: 2.2 若你想已ie8的标准模式打开,就写成<meta http-equiv=X-UA-Com

文档模式与IE浏览器模式

一.IE浏览器的兼容性视图 兼容性视图是微软为了兼容基于其它网页标准开发的网站,确保广大互联网用户在浏览网页时不至于受困于网页显示混乱的问题,而专门为IE8增加的一项实用功能.当IE8检测到某网站不兼容时,地址栏右侧就会出现兼容性视图按钮,只需轻轻一点,大部分网页显示就会正常了.(网页会以IE7的代码规范来显示) 它引入重要的两个概念便是“浏览器模式”和“文档模式”: 注:也可按F12进入开发人员工具来查看当前页面的浏览器模式和文档模式 二.文档模式 指定IE页面排版引擎根据哪一个版本的方式来解

1关于script标签属性,注意点,浏览器文档模式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title></h