汉语原文：CSS在Internet Explorer 6, 7 和8中的区别
译自：CSS Differences in Internet Explorer 6, 7 and 8
有关访问器的最离奇的统计分析結果之1便是Internet Explorer 版本号6，7和8共存。截至本文，Internet Explorer各个版本号一共占有了大概65%的销售市场市场份额。在网站开发设计小区，这个数据要小许多，统计分析显示信息大约仅有40%。
这些统计分析中较为趣味的一部分是，IE6、IE7、IE8之间的标值很贴近，这避免了单独Microsoft的访问器占居统治影响力——与以往的状况相反。依据这些让人遗憾的统计分析結果，在为顾客开发设计网站的情况下开发设计人员对全部当今应用的IE访问器做全面的检测是必要的，并且这样在本人新项目上还可以笼络更多的客户。
多谢那些JavaScript库(架构)，跨访问器的Javascript的检测早已像当今情势所容许的那样贴近完善了。但在CSS开发设计中还并不是这样，非常是关联到IE现阶段存在的3个版本号。
本文尝试为期待掌握CSS对IE6、IE7、IE8的适用的不一样的开发设计者出示1份详尽的、易用的参照。本参照包括下列状况的简述和适配状况：
本文不探讨：
因而，本文的管理中心是3个访问器中的不一样，而并不是必要的适用缺点。该目录被分成下列5个一部分：
body > p { color: #fff; }
子挑选器挑选1个特殊父级元素的全部立即子级元素，在上面的事例中，body是父元素，p是子元素。
IE7中，假如在父级标识和子级标识之间有1个HTML注解，子挑选器将不容易工作中。
.class1.class2.class3 { background: #fff; }
链类用于送1个HTML元素有好几个class申明的状况，就像这样：
<div class="class1 class2 class3"> <p>Content here.</p> </div>
IE6仿佛适用这类状况，由于它能配对链中的最终1个class到应用该class的元素上，但是，它其实不能限定1个应用链中全部class的元素。
a[href] { color: #0f0; }
该挑选器容许1个元素被精准定位要是它有特定的特性。在上面的事例中，全部的带有href特性的a标识都会被限制，而沒有href特性的a标识不容易被限制。
h1+p { color: #f00; }
该挑选器精准定位邻近到特定元素的弟兄标识。上面的事例可能限制p标识，可是他务必是h1标识的弟兄并且要立即尾随在h1标识的后边。例如：
<h1>heading</h1> <p>Content here.</p> <p>Content here.</p>
在上面的编码中，CSS款式将只对第1个p合理。由于它是h1的弟兄并且紧跟随h1。第2个p也是h1的1个弟兄，可是它沒有紧跟随h1。
在IE7中，假如在弟兄之间有1个HTML注解，邻近弟兄挑选器将失效。
h1~p { color: #f00; }
该挑选器精准定位1个特定元素后边的全部弟兄元素。将此挑选器运用到上面的那个事例，可能对两个p标识都合理。自然，假如有1个p元素出現在h1以前，那个p元素不容易被配对。
a:hover span { color: #0f0; }
1个元素能够被:hover伪类后边的挑选器精准定位，就像子孙后代挑选器1样。上面的事例，在电脑鼠标悬停的情况下，可能更改a元素内的span元素中的文本的色调。
a:first-child:hover { color: #0f0; }
伪类能够链起来以变小元素挑选。上面的事例会精准定位每个父级元素下的第1个a标识，并将hover伪类P运用到它上。
div:hover { color: #f00; }
:hover伪类能够运用到任何元素的悬停情况，而不只是a标识。
div li:first-child { background: blue; }
改伪类精准定位每个特定的元素的父级元素的第1个子元素。
IE7中，假如要精准定位的第1个子元素以前有HTML注解，first-child伪类可能失效。
a:focus { border: 1px solid red; }
该伪类精准定位有电脑键盘聚焦点的全部元素。
#box:before { content: "本段文本在盒子前面"; } #box:after { content: "本段文本在盒子后边"; }
这两个伪元素各自在特定元素的前面和后边加上转化成的內容，融合content特性1起应用。
#box { position: absolute; top: 0; right: 100px; left: 0; bottom: 200px; background: blue; }
界定top, right, bottom, 和left 值到肯定精准定位的元素上把给这个元素具体的尺寸(宽度和高宽比)，尽管并沒有设置使宽度和高宽比值。
#box { min-height: 500px; min-width: 300px; }
这两个特性各自特定元素的宽和高的最少值，容许1个盒子能够比特定的最少值更大，可是不可以更小。它们两个能够1起应用，还可以分起来用。
#box { max-height: 500px; max-width: 300px; }
这两个特性各自特定元素的高和宽的最大值，容许1个盒子比这个特定的最大值小，可是不可以更大。它们还可以另外应用或独立应用。
#box { border: solid 1px transparent; }
1个全透明的边框色容许1个边框和边框色可见(或不全透明)时占有1样的室内空间。
#box { position: fixed; }
position特性的这个值容许1个元素肯定的相对对话框精准定位。
#box { background-image: url(images/bg.jpg); background-position: 0 0; background-attachment: fixed; }
background-attachment特性的值为fixed容许1个情况照片肯定地相对对话框精准定位。
就像position:fixed1样，IE6一样不适用background-positon的fixed值 。但是，在IE6中仅有在这个值用于根元素的情况下才合理。
#box { display: inherit; }
将值inherit 运用到1个特性那个容许1个元素从它的包括元素承继测算的值。
IE6 和IE7 不适用inherit 值除direction 和visibility 特性。
table td { border-spacing: 3px; }
该特性设定邻近的报表模块的边框之间的空白。
table { empty-cells: show; }
该特性，只运用于元素的display特性被设定为 table-cell的元素，容许空模块格3D渲染她们的边框和情况。不然，它们将不能见。
table { caption-side: bottom; }
这个特性容许将1个报表的题目放到报表的底部——默认设置是头顶部。
#box { clip:rect(20px, 300px, 200px, 100px) }
该特性特定1个盒子的1个地区可见，剩余的一部分修剪掉，或不能见。
趣味的是，该假如不应用分隔各个值的逗号，IE6和IE7还可以用这个特性。(例如，应用空格分隔裁切的值。)
p { orphans: 4; } p { widows: 4; }
orphans特性设置在复印网页页面底部显示信息的至少行数。而widows 特性用来设置复印网页页面头顶部最少显示信息的段落的行数。
#box { page-break-inside: avoid; }
该特性设置分页查询是不是产生在1个特定元素内。
#box { outline: solid 1px red; }
outline 是outline-style, outline-width, 和outline-color的缩写。该特性要优于border特性，由于它不容易危害文本文档流，因此u更有助于调节合理布局难题。
#box { display: inline-block; }
display 特性一般设定为block, inline, 或none。取代值包含：
inline-block inline-table list-item run-in table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group p { white-space: pre-line; } div { white-space: pre-wrap; }
white-space特性的pre-line值设置将好几个空白元素折叠为1个空白，另外容许确立的设定断行。white-space 特性的pre-wrap 值不容易将好几个空白折叠为1个，但是也容许确立的设定断行。
@import url("styles.css") screen;
就像上面的事例那样，引进的款式表文档的新闻媒体种类申明在文档详细地址的后边。在该事例中，新闻媒体种类是”screen”。
虽然IE6 和IE7 适用 @import，它们在新闻媒体种类被特定的情况下会失效，乃至会引发正@import标准失效。
h2 { counter-increment: headers; } h2:before { content: counter(headers) ". "; }
该CSS 技术性容许你全自动提升出現在特定元素前面的序号，融合before伪元素1起应用。
q { quotes: "'" "'"; } q:before { content: open-quote; } q:after { content: close-quote; }
特定用于转化成內容的引入呼号，用于q标识。
下面是在上文中沒有提到的IE6和IE7的诸多bug。自然这个目录不包含在这3个访问器中都不适用的条目。
<abbr> 元素 <select> 元素一直出現在层叠最上面，而疏忽z-index值 假如锚点的伪类沒有应用正确的次序(:link, :visited, :hover)，:hover 伪类将失效 !important 申明会被同1标准中同1特性的沒有应用!important的第2个申明遮盖。 height 主要表现相近于min-height width 主要表现相近于min-width text-decoration的 line-through 值在文本上看起来比其他访问器要高1些 list-style-type的全部能用的值 list-style-image 将不容易显示信息 @font-face list-style-type的全部能用的值 list-style-image 将不容易显示信息 @font-face 1些在这里沒有提到的IE bug只会在特殊自然环境产生，并且沒有特定到特殊的CSS特性或值。查询下面的参照以掌握更多难题：
Louis Lazaris 是1个定居在加拿大多数伦多的随意岗位者，网页页面开发设计者，在网站开发设计行业有9年的工作经验，在其blogImpressive Webs公布网页页面设计方案文章内容和实例教程。你能够follow Louis on Twitter 或在这里联络到他。
Copyright © 2002-2020 秀米制作h5_h5如何制作_h5小游戏制作_h5游戏开发_免费的h5制作网站 版权所有 （网站地图） 粤ICP备10235580号