关于解决不同浏览器之间的兼容性问题
常见的浏览器兼容性问题与解决方案大致有以下九种形式:
一、不同浏览器的标签默认的外边界和内填充不同
问题表现:不加样式控制下,margin和padding差异较大
解决方案:css里 *{margin:0; padding:0;}
备注:这是最常见也是最易解决的一个兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0
二、块属性标签float后,又有横向的margin情况下,在IE6显示margin比设置的大
问题表现:IE6后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入display:inline;转化为行内属性
备注:横向浮动的div布局,使用上margin进行边界设置时,必然会碰到此问题
三、设置较小高度标签(一般小于10px),在IE6、IE7,遨游中高度超出设置高度值
问题表现:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度
备注:一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度,即使标签是空内容,标签的高度还是会有默认行高。
四、行内属性标签,设置display:block后采用float布局,又有横向的margin情况,IE6间距bug
问题表现:IE6的间距比超过设置的间距
解决方案:在display:block;后面加入display:inline;display:table;
备注:行内属性标签,为了设置宽度,需要设置为display:block;(表单元素除外)在用float布局且有横向margin后,在IE6下,就具有了块属性float后的横向margin的bug。由于设置为display:inline,高度失效,所有在后面补上display:table。
五、图片默认有间距
问题表现:几个img标签放在一块,有些浏览器会有默认的间距,有通配符也不起作用
解决方案:使用float属性为img布局
备注:img标签是行内属性标签,只要不超出容器高度,img会排在一行里,使用float是比较好的选择
六、标签最低高度设置min-height不兼容
问题表现:min-height本身就是一个不兼容的css属性,所以设置min-height时不能兼容所有浏览器
解决方案:如果设置一个标签最小高度为200px,需要进行设置 {min-height:200px; height:auto !important;
height: 200px; overflow:visible;}
备注:b/s系统前端时,当内容小于一个值时,容器的高度保持该值,当内容大于该值时,高度自适应且不出现滚动条。
七、光标手形
问题表现:firefox不支持hand,但ie支持pointer
解决方案:统一使用cursor:pointer;
八、字体大小定义不同
问题表现:对字体大小small定义不同,Firefox为13px,而IE为16px,差别比较大
解决方法:使用指定的字体大小如14px或者使用em
九、IE6 3px bug
问题表现:左侧div浮动left,右边DIV可以接着横向排列,形成典型一列固定,第二列自适应,IE6出现之间3px间隙
解决方法:对左侧left的盒子补上_margin-right: -3px;
- 关于浏览器对空格兼容性问题解决方法
- W3C对于CSS及浏览器之间的兼容性问题解决方案
- 解决在IE8浏览器里,在同一个IE进程中的不同选项卡之间的sessionID共享问题
- 关于jsp页面链接在不同浏览器中出错的问题解决
- 关于解决jq不同版本兼容性问题
- 解决uploadify插件不同浏览器下的兼容性问题
- 解决不同js特效在不同浏览器之间的兼容问题
- IE和火狐等浏览器关于 的兼容性问题解决
- 关于jsp页面链接在不同浏览器中出错的问题解决
- 不同浏览器之间的javascript和css兼容性问题
- 关于浏览器的一些兼容性问题与解决方法
- 关于CSS+DIV 开发 与各浏览器的兼容性问题..解决方法.
- 解决不同浏览器下获取样式的兼容性问题
- 关于CSS+DIV 开发 与各浏览器的兼容性问题及解决方法
- Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小(无人值守,节约测试成本的福音,BOSS 最爱)
- 浏览器版本不同导致文件无法下载问题解决方法
- 关于spring boot 中App类位置不同导致出错的问题的解决方法
- Oracle RMAN 兼容性 及 不同版本和不同平台之间使用 常见问题说明
- cocos2dx 加载cocostudio创建的exportjson文件 不同图片之间会有黑线问题解决方法
- JS获得鼠标位置(已经解决不同浏览器问题)