CSS高级应用技巧.pdf

《CSS高级应用技巧.pdf》由会员分享，可在线阅读，更多相关《CSS高级应用技巧.pdf（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、10 要点解决 IE6 兼容问题1、使用声明你必须经常在html 网页头部放置一个声明，推荐使用严格的标准。例如or,for XHTML:最后你需要是ie6 进入兼容模式，这已经足够兼容了。2、使用 position:relative设置一个标签position:relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。3、为浮动元素使用display:inline浮动元素会有一个著名的ie6 双边距 margin bug。假如你设置了左边距 5px 但实际上得到了10px 左边距。display:inline

2、可以解决这个问题，尽管它不是必需的，但是css 仍然有效。4、设置元素启动hasLayout 大部分 ie6（ie7）的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是ie 内置的设定，确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果，设置hasLayout 也是必须的。5、修复重复字符的bug复杂的布局会触发一个bug：浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法，部分是理想的，并且一些测试和出错是必须的。a、确保浮动元素都使用：display:inline；b、最后一个浮动元素使用margi

3、n-right:-3px;c、在浮动对象最后一个元素后使用一个条件注释。例如这里输入注释,!endifd、在容器内的最后使用一个div 空标签（它也必须设置90%宽度甚至更小）6、使用 a 标签完成可点击和hover 原理Ie6 只支持 a 标签的 css 定义 hover 效果你可以使用它去控制javascript启动的 widgets，使得他们仍然保持键盘操作。这里有个二择一的问题，但是 a 标签是所有解决方案中最可靠的。7、使用!important，或是高级选择符替代ie 特定代码在外置的 css 文件里，放弃凭借传统的hacks 和条件判断，使用有效的 css 代码去针对 ie6 仍然

4、是有可能的。例如：最小高度可以使用一下定义。#element min-height:20em;height:auto!important;/*understood by all browsers*/height:20em;/*IE6 incorrectly uses this value/*Ie6 不支持“min-height”并且错误的将20em重写为“auto”。不过，当内容大于设置的空间时，它会增加它的尺寸。另外一个选择是使用高级选择符。例如#element min-height:20em;height:20em;8、避免百分比定义百分比在 ie 下比较混乱。除非你非常小心每个父元素的尺

5、寸，这样就大概可以最后避免了。你仍然可以对其他浏览器使用!important来使用百分值。例如：body margin:2%0!important;margin:20px 0;/*IE6 only*/9、早点和经常测试在你的网站和应用程序完成之前，不要放弃 ie6 的测试。问题将会更加严重并且需要很长时间去修复。如果你的网站可以运行于firefox和 ie6，它将差不多肯定可以在其它浏览器下运行。10、重构你的代码经常的，修复会比重新考虑布局问题更加花费时间。Html 细微的修改和更加简单的css 经常是最有效的。这意味着你要放弃完美的合法的代码，但是将会更少的问题出现，并且你知道怎样处理将要

6、出现的情况。/*ignored by IE6*/#elementid height:auto;代码部分试了下语法着色，貌似有点乱了，这里是英文原文的链接:http:/ IE Bug要想更好的理解 css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE 下的显示错误，就是源于 haslayout。什么是 haslayout？haslayout 是 Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内

7、容。为了调节这两个不同的概念，渲染引擎采用了hasLayout 的属性，属性值可以为true 或 false。当一个元素的 hasLayout 属性值为 true 时，我们说这个元素有一个布局（layout）当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout”的时候，我们的意思是指它的微软专有属性hasLayout 被设为了 true。一个“la

8、yout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML 元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有 haslayout，在 IE Developer Toolbar 下，拥有 haslayout 的元素，通常显示为“haslayout=-1”。负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：*b

9、ody and html*table,tr,th,td*img*hr*input,button,file,select,textarea,fieldset*marquee*frameset,frame,iframe*objects,applets,embed 对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。如何激发 haslayout？大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其

10、“拥有布局”。如下所示，通过设置以下 css 属性即可。*display:inline-block*height:(任何值除了 auto)*float:(left 或 right)*position:absolute*width:(任何值除了 auto)*writing-mode:tb-rl*zoom:(除 normal 外任意值)Internet Explorer 7 还有一些额外的属性(不完全列表):*min-height:(任意值)*max-height:(除 none 外任意值)*min-width:(任意值)*max-width:(除 none 外任意值)*overflow:(除 v

11、isible 外任意值)*overflow-x:(除 visible 外任意值)*overflow-y:(除 visible 外任意值)*position:fixed 其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器广泛支持。对于内联元素(默认即为内联的元素，如 span，或display:inline;的元素)，width 和 height 只在 IE5.x 下和 IE6 或更新版本的quirks 模式下触发 hasLayout。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 w

12、idth 或 height 不能在此种情况下令该元素具有layout。zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。具有“layout”的元素如果同时 display:inline，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display:inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inli

13、ne-block。haslayout 问题的调试与解决当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是 haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的 width/height 属性，其次再考虑其他属性。对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为

14、 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE 的条件注释。对 IE7 来说，最好的方法时设置元素的最小高度为 0(min-height:0;)。haslayout 问题引起的常见 bug IE6 及更低版本的双空白边浮动 bug bug 修复:display:inline;IE5-6/win 的 3 像素偏移 bug bug 修复:_height:1%;E6 的躲躲猫(peek-a-boo)bug bug 修复:_height:1%;糖伴西红柿说，这篇文章不是原创，是网上资源的汇总，加上自己理解

15、的综合。可能还不是很全面，还需要再进一步细化。下列元素默认 hasLayout=true，table td body img hr input select textarea button iframe embed object applet marquee很多情况下，我们把 hasLayout的状态改成 true 就可以解决很大部分ie 下显示的 bug。hasLayout 属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout 的一些 CSS属性值。display 启动 haslayout的值:inline-block

16、 取消 hasLayout 的值:其他值width/height 启动 hasLayout 的值：除了 auto 以外的值取消 hasLayout 的值：auto position 启动 hasLayout 的值：absolute 取消 hasLayout 的值：static float 启动 hasLayout 的值：left或 right 取消 hasLayout 的值：none zoom 启动 hasLayout 的值：有值取消 hasLayout 的值：narmal 或者空值（zoom是微软 IE 专有属性，可以触发hasLayout 但不会影响页面的显示效果。zoom:1 常用来除错

17、，不过 ie 5 对这个属性不支持。）writing-mode:tb-rl 这也是微软专有的属性。ie7 还有一些额外的属性可以触发该属性（不完全列表）：min-height:(任何值)max-height:(任何值除了 none)min-width:(任何值)max-width:(任何值除了 none)overflow:(任何值除了 visible)overflow-x:(任何值除了 visible)overflow-y:(任何值除了 visible)5 position:fixed 有时候还会遇到外层的 div 高度为 0，而内层 div 高度大于 0，外层没有随着内层的高度变化。IE 下

18、解决这个问题，只要触发IE 的 hasLayout 就行了，在 CSS里增加一句 zoom:1;什么是 haslayout？haslayout 是 Windows Internet Explorer渲染引擎的一个内部组成部分。在 Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了hasLayout 的属性，属性值可以为true 或 false。当一个元素的 hasLayout 属性值为 true 时，我们说这个元素有一个布局（layout）当一个元素有一个布局时，它负责对自己和可能

19、的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有 layout”或“得到layout”，或者说一个元素“has layout”的时候，我们的意思是指它的微软专有属性hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML 元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayo

20、ut 为只读属性一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有 haslayout，在 IE Developer Toolbar 下，拥有 haslayout 的元素，通常显示为“haslayout=-1”。负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：*body and html*table,tr,th,td*img*hr*input,button,file,select,textarea,fieldset*marquee*frameset,frame,iframe*objects,applets,

21、embed 对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。如何激发 haslayout？大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。*display:inline-block*height:(任何值除了 auto)*float:(left 或 right)*position:absolute*width:(任何值除了 au

22、to)*writing-mode:tb-rl*zoom:(除 normal 外任意值)Internet Explorer 7 还有一些额外的属性(不完全列表):*min-height:(任意值)*max-height:(除 none 外任意值)*min-width:(任意值)*max-width:(除 none 外任意值)*overflow:(除 visible 外任意值)*overflow-x:(除 visible 外任意值)*overflow-y:(除 visible 外任意值)*position:fixed 其中 overflow-x 和 overflow-y 是 css3 盒模型中的属

23、性，目前还未被浏览器广泛支持。对于内联元素(默认即为内联的元素，如 span，或display:inline;的元素)，width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。具有“layout”的元素如果同时 display:inline，那么它的行为就和标准中所说的 in

24、line-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display:inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。haslayout 问题的调试与解决当 网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影

25、响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是 haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE 的条件注释。对 IE7 来说，最好的方法时设置元素的最小高度为 0(min-height:0;)。haslayout 问题引起的常见 bug IE6 及更低版本的双空白边浮动 bug bug 修复:display:inline;IE5-6/win 的 3 像素偏移 bug bug 修复:_height:1%;E6 的躲躲猫(peek-a-boo)bug bug 修复:_height:1%;