常见的IE6兼容以及css兼容
IE6虽然随着XP系统退出市场在国外基本基本消失,但是在国内依然占据很大的市场份额。政务网站、页游官网等依然要考虑到IE6用户的体验。如果你的网站使用CSS3等“新技术”时,就必须果断放弃IE6的兼容。
IE6不支持兄弟选择器和多类选择器,使用时一定要注意。
浏览器添加默认样式
问题:
有些浏览器会给浏览器添加默认样式,而且不同浏览器添加的样式不同,导致布局在不同浏览器发生不同的错乱。
解决:
清楚默认样式,保证不同浏览器样式统一。(百度中有很多不错的清除样式模板)以下是我自己常用的清除样式文件:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, button, input, textarea,th, td { margin:;padding:;}/* 设置默认字体 */
body,button, input, select, textarea { /* for ie */ font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */ }
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100% }
img { height: auto;vertical-align: middle;border: 0 none;}
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ border-bottom: 1px dotted;cursor: help;}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea { font-size: 100%; margin:;vertical-align: baseline; /* 使得表单元素在 ie 下能继承字体大小 */ }
table {border-collapse: collapse;border-spacing:;}
hr {border: none;height: 1px;}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll;}
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清除浮动 <div style="height:0;overflow:hidden;clear:both;"></div>
IE6不支持固定定位
问题:
IE6不支持position:fixed;
解决:
选择器{width: 200px;height: 200px;background: red;position: fixed;bottom: 50px;right: 50px;*position: absolute;*top: expression(eval(document.documentElement.scrollTop+200));}
*html{background-image: url("blank:about");background-attachment: absolute;}
IE6不支持png透明
问题:
IE6下png透明度不支持
解决:
background-image:url(123.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='123.png');
滤镜中的图片路径应该是绝对路径。
<!DOCTYPE HTML>文档类型的声明
问题:
IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象。
解决:
书写文档声明。
IE6默认行高
问题:
IE6、IE7、遨游浏览器;设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
解决:
给超出高度的标签设置overflow:hidden;或者将文字的行高line-height设置为小于块的高度。
IE6 3px的bug
问题:
IE6浮动元素与非浮动元素处于一行有默认的3px间距。
解决:
设置所有元素浮动。
IE6只支持a链接的hover
问题:
IE6只支持a的hover不支持其他元素的hover。
解决:
使用JS模拟a:hover或者合理嵌套a链接。
IE6透明rgba与opacity
问题:
IE6不支持此两种透明的设置方法。
解决:
使用IE6当中的滤镜filter替代掉,如:opacity:0.6;_filter:alpha(opacity=60)。
IE6不支持min/max-height
问题:
IE6不支持min/max-height。
解决:
为IE6单独设置hack,即_height:最小高度值;_width:最小宽度值;
IE6li的间距问题
问题:
IIE6浏览器 li标签设置宽高,且li里面的元素发生了浮动。
解决:
- li不设置宽高。
- li内部元素不浮动。
a链接点击时有蓝色边框
问题:
a链接点击时有蓝色边框。
解决:
a:focus { outline: none 0; }
li在IE6自适应消失
问题:
如果li中有块元素在IE6下虽然浮动,默认宽度是100%而不是自适应。
解决:
- li设置固定宽度
- display:inline_block;
常见的IE6兼容以及css兼容的更多相关文章
- Javascript兼容和CSS兼容总结
javascript部分 1. document.form.item 问题问题:代码中存在 document.formName.item(“itemName”) 这样的语句,不能在FF下运行解决方法: ...
- js和css兼容问题
(一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" s ...
- DIV+CSS IE6/IE7/IE8/FF兼容问题汇总
1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- ie6 7 8 9 firefox的css兼容问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DIV+CSS IE6/IE7/IE8/FF兼容问题大全
1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...
- CSS兼容IE6 IE7 IE8 IE9 Firefox的总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 解决ie6上碰到的css兼容问题
ie6上css碰到的坑 前两天在给一个项目做东西的时候,碰到一个有意思的项目,是需要兼容ie6,有一些碰到并且解决的问题,给大家写下来,方便大家以后碰到类似的问题哈- 喜欢的话还请点赞! 1.impo ...
- IE6的那些css常见bug(汇总)
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
随机推荐
- U制作LFS linux
我希望自己的LFS运行在U盘上,远期目标是要制作一个基于LFS的编程练习U盘,方便自己的编程练习.今天算是工作的第一步,先把LFS做到U盘上. 把Linux做到U盘上通常的做法是采用两步启动法:先生成 ...
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- 一步一步学Remoting系列文章
转自:http://www.cnblogs.com/lovecherry/archive/2005/05/24/161437.html (原创)一步一步学Remoting之一:从简单开始(原创)一步一 ...
- Linux上构建一个RADIUS服务器详解
作为一名网络管理员,您需要为您所需管理的每个网络设备存放用于管理的用户信息.但是网络设备通常只支持有限的用户管理功能.学习如何使用Linux上的一个外部RADIUS服务器来验证用户,具体来说是通过一个 ...
- lightoj 1007
预先处理好phi数组和前缀和,水题. #include<cstdio> #include<string> #include<cstring> #include< ...
- [liu yanling]软件测试的分类
按测试的对象或范围分类: 单元测试.文档测试.系统测试等. 按测试目的分类: 功能测试.回归测试.性能测试.可靠性测试.安全性测试和兼容性测试 等. 根据测试过程中被测软件是否被执行: 分为静态测试 ...
- 安装protobuf及相关的lua生成器
1.google code 需要用到的水星:http://mercurial.selenic.com/ 2.protobuf地址 https://code.google.com/p/protobuf/ ...
- LittleTool之批量修改材质
using UnityEngine; using System.Collections; using UnityEditor; public class ChangeMaterial : Editor ...
- Html笔记(十)XHTML XML
XHTML 是可扩展的超文本标记语言(Extensible HyperText Markup Language). XHTML 是 w3c 组织在2000年的时候为了增强HTML推出的,本来是想替代H ...
- 2013 ACM区域赛长沙 H zoj 3733 (hdu 4798) Skycity
题意:一个圆台,底面和顶面半径分别为R,r,然后高度为H,一共F层,每层高度一样,然后要在每层的天花板上贴方格玻璃,方格玻璃要满足以下几个条件: 方格玻璃面积不能小于S,且方格玻璃要围成一个正多边形, ...