admin管理员组文章数量:1530981
2024年1月14日发(作者：)
文档类型2010年8月19日16:32使用以下DOCTYPE可使避免IE6进入怪异模式,不适用文档声明或使用HTML3以下的文档声明会是IE6进入向下兼容IE5的怪异模式DOCTYPE (Document Type) 文档类型，说明 XML 或者 (x)HTML 的版本。DTD (Document Type Definitions) 文档类型定义，浏览器根据 DTD 来解释页面标识，并展现出来。DOCTYPE 通常（但不总是）包含指定的DTD文件的URL。浏览器一般不读取这些文件，而是只识别常见的 DOCTYPE 声明。HTML 4.01 Transitional
"/TR/html4/">HTML 4.01 Frameset
"/TR/html4/">XHTML 1.0 Strict
"/TR/xhtml1/DTD/">XHTML 1.0 Transitional
"/TR/xhtml1/DTD/">XHTML 1.0 Frameset
"/TR/xhtml1/DTD/">XHTML 1.1
"/TR/xhtml11/DTD/">源文档
分区IE6兼容的第1 页
垂直堆栈2010年8月20日10:58根据w3c关于stack level的介绍可以得出以下stack level规则每个stacking context都包括以下stack level （后来居上）：IE6/IE7的规则每个stacking context都包括以下stack level （后来居上）：1.父级stacking context的背景、边界2.z-index值为负值的定位元素（值越小越在下）3.脱块文本脱float块文本(ie7)/行内元素4.未固定宽度文本流中非定位的block块级子元素1.父级stacking context的背景、边界2.z-index值为负值的定位元素（值越小越在下）3.文本流中非定位的block块级子元素4.脱float块的文本5.文本流中非定位的float浮动子元素/文字元素5.固定宽度文本流中非定位的block块级子元素/文本流中非定位的、float浮动子元素/文字6.脱块文本/行内元素7.z-index：auto/0的定位元素8.z-index值为正的定位元素（值越大越在上）
分区IE6兼容的第2
页6.z-index：auto/0的定位元素7.z-index值为正的定位元素（值越大越在上）
IE6/7技巧2010年8月24日12:35禁用IE6/7默认的垂直滚动条(Disabled IE default Vertical Scroll bar)默认情况下，即使内容适合窗口大小，IE(译注：IE6/7)也会显示垂直滚动条。你可以使用overflow:auto，让滚动条只在你需要时出现。代码:html { overflow: auto;
}
分区IE6兼容的第3 页
CSShack2010年8月20日16:21#select{width:500px; /*DOM*/+width:500px; /*for ie6/7 */_width:500px; /*for ie6 */width:500px !important; /* for not ie6 */使用IE特有条件注释微软给IE添加了条件注释以区分不同版本，任何东西都可以塞进条件注释里：标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。规则如下：（译注：可参考IE 特有注释(hack)）
这段文字会在所有浏览器显示
分区IE6兼容的第4 页
使用条件注释加载css的好处是这些样式是独立于其他css文件的，因此不会在编写兼容代码时弄得一团糟；而且当IE6的市场份额降低到不需要兼容时，可以快速的清理掉。使用条件注释的唯一缺点是在IE浏览器下会增加额外的HTTP请求数，所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件，因为js文件会造成阻滞，在js未加载完之前其余文件都不会被加载；对于js请使用JavaScript程序来区分浏览器而非条件注释。源文档
分区IE6兼容的第5 页
IE6Bug2010年8月19日16:40IE6标准模式水平居中
margin:0 autoIE7DW普通视图DOM溢出overflow:visibleoverflow:hidden/auto向下溢出顶开父盒子的高度,向上溢出被隐藏溢出不影响父盒子和其他元素,直接超出父元素(不论上下)溢出不影响父盒子和其他元素,直接超出父元素(不论上下)min/max-width/height
position:fixed为非链接元素添加:hover!important:before和:after
空白边合并png-24 alpha通道png-8 gif
透明浮动元素垂直堆叠高于普同级通元素横向导航栏标准代码li {float:left;width:100px;height:40px;}li a {display:inline-block;width:...px;height:40px;
}
IE6嵌套产生的Bug(多见于列表)1.父块(未设宽度自适应)浮动,子块display:block设置高度产生Bug (溢出BUG衍生问题)子块顶穿父块,怀疑为设置高度使子块宽度变为默认的占整行,IE6中父块浮动收缩时不会使子块默认占整行受影响(DOM中会)解决办法子块display:inline-block或加float2.(垂直堆叠bug衍生)
解决:使用最上面的写法分区IE6兼容的第6
页
IE6/7共有问题IE6专有问题IE6/7支持水平居中:IE6/7中,标准模式下可使用margin:0 auto水平居中。兼容模式下无效。
IE6下不支持的属性最大最小宽度min/max-width/height
相对于浏览器窗口定位 position:fixed为非链接元素添加:hover关于IE6/7垂直堆叠BUG假设浮动块固定大小,如果非浮动块流动宽度则同DOM相同,浮动块抬起,非浮动块在下面如果非浮动块固定宽度则产生BUG,非浮动块会抬起跟浮动块同级嵌套情况,子浮动元素对父不浮动元素也可见IE6
3像素空白浮动元素紧接着非浮动元素则之间会有三像素空白,需要用CSShack 设置浮动元素_margin-right:-3px或者浮动元素后最好不要直接跟非浮动元素,尽量清除IE6/7空元素设宽度bug(会占一行高)IE7可设height:0可解决IE6溢出:IE6中向下溢出默认会顶开父盒子的高度(如果是英文连续没有空格还会顶开宽度),向上溢出则会被直接隐藏而在IE7和DOM中文字会溢出显现但不会影响父盒子IE6双倍空白边问题IE6浮动盒子同父级元素左右两边接触时会跟左右两边产生双倍横向空白边解决方法是个盒子加上display:inline目前没发现有什么影响IE6不行IE6设空元素height:0也会有高度空白边合并IE6/7均不支持IE6/7父元素设置overflow为auto/hidden/scroll时子元素设置position:relative子元素脱出连续浮动元素,固定宽度接自适应宽度首先,在DOM中,自适应宽度元素如果占满一整行则浮动(对宽度是100%的元素)不能出现环绕或被环绕效果IE8中先确定宽度后浮动
浮动与浮动元素相接或非浮动元素相接都是标准文本流形式,即不设宽度是宽度设为整行(浮动后需要元素内容多余一行),则会出现,最右边占满一整行的效果IE6/7先浮动后确定宽度
如下图所示三像素空白BUG
连续浮动元素相接BUG
分区IE6兼容的第7
页
不常见Bug2010年8月20日23:41IE6断头台当容器中左浮动对象右侧直接跟链接，并且链接的hover状态属性有变化的话，可能导致容器的高度重新计算，并切掉左浮动对象的部分内容。解决方案：浮动对象后面不直接跟非浮动对象，或者最后清除浮动。IE6捉迷藏增加了一层div结构，问题肯定出在这。与width的定义应该没有关系，难道是background-image有冲突？去掉div中的背景图，无效；这就是剩下position:relative了，有这个属性是因为其子元素有需要绝对定位，那先去掉试试，绝了，去掉后显示正常！！这是为什么呢？如果说定义position:relative后div无法撑开，那其背景已经显示出了，不成立呀~还有如果定义页面中的p足够的高度，但向下拖动垂直滚动条，是ul部分被掩盖，然后在显示出来，这时候li标签的小图标也可以显示了，很奇怪。。。
position:relative;}.serviceExplain{padding:20px;} XML
目前推荐遵循的是W3c于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局，桢和其它表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
- 一个很简单的结构，只是一个列表，每项前有个项目图标的修饰图；
- 仔细观察我前面的修饰图标
我是打酱油的...