常见的IE6兼容以及css兼容_html/css_WEB-ITnose

IE6虽然随着XP系统退出市场在国外基本基本消失，但是在国内依然占据很大的市场份额。政务网站、页游官网等依然要考虑到IE6用户的体验。如果你的网站使用CSS3等“新技术”时，就必须果断放弃IE6的兼容。

浏览器添加默认样式

问题：

有些浏览器会给浏览器添加默认样式，而且不同浏览器添加的样式不同，导致布局在不同浏览器发生不同的错乱。

解决：

清楚默认样式，保证不同浏览器样式统一。（百度中有很多不错的清除样式模板）以下是我自己常用的清除样式文件：

 1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, button, input, textarea,th, td { margin: 0;padding: 0;}/* 设置默认字体 */ 2 body,button, input, select, textarea { /* for ie */ font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */ } 3 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } 4 h2 { font-size: 16px; } 5 h3 { font-size: 14px; } 6 h4, h5, h6 { font-size: 100% } 7 img { height: auto;vertical-align: middle;border: 0 none;} 8 address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 9 code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */10 small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */11 ul, ol { list-style: none; }12 /* 重置文本格式元素 */13 a { text-decoration: none; }14 abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted;cursor: help;}15 q:before, q:after { content: ''; }16 /* 重置表单元素 */17 legend { color: #000; } /* for ie6 */18 fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */19 /* 注：optgroup 无法扶正 */20 button, input, select, textarea { font-size: 100%; margin: 0;vertical-align: baseline; /* 使得表单元素在 ie 下能继承字体大小 */ }21 table {border-collapse: collapse;border-spacing: 0;}22 hr {border: none;height: 1px;}23 /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */24 html { overflow-y: scroll;}25 body{font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;color: #8C8C8C;} 

img标签底部间隙

问题：

div中包含一张图片，底部可能有2px、4px或更多的间隙，不同的font-size会影响间隙的大小。

解决：

将图片的垂直对齐方式vertical-align值设为top或bootm 将图片转化为块元素，display:block; 将包含图片的父容器字体大小设为0，font-size:0;

img在IE有蓝色边框

问题：

img标签在IE6-IE10加了超链接（a标签）后蓝色边框

解决：

img{border:0;}

margin上下边距合并

问题：

同时给上下容器添加上下边距会出现边距合并问题（合并最大的值）

解决：

不要同时给两个上下边距，只给一个就好。

margin-top没有加到指定元素上

问题：

在容器中给子元素一个margin-top没有想要的效果。

解决：

给父元素一个透明的像素边框 border:1px solid rgba(0,0,0,0); 通过给父元素一个padding-top来模拟margin-top。

IE6双倍边距

问题：

给浮动元素加margin-left时IE6会出现双倍边距。

解决：

给浮动元素display:inline;

子元素浮动时父元素高度为0

问题：

父元素高度不确定，子元素浮动时，父元素高度变为0。浮动子元素层级高于父元素导致撑不开父元素。

解决：

父容器添加overflow:hidden; 在子元素后添加一个空div清除浮动

查看更多关于常见的IE6兼容以及css兼容_html/css_WEB-ITnose的详细内容...