zoukankan      html  css  js  c++  java
  • 12个需要注意的规范样式写法解决浏览器兼容问题

    浏览器兼容是令很多web前端头痛的一个问题,因为不同浏览器使用内核及所支持的HTML等网页语言标准不同,以及用户客户端的环境不同造成的显示效果不能达到理想效果,对于浏览器兼容问题只有经过不断的调试积累,规范样式代码,才能才能免去一些hack,减少很多额外的工作量。在这里分享下本人从事前端开发以来积累的浏览器兼容经验。--(川也设计-泸州网站制作

    1、IE6 7中一串宽度不固定的A标签在宽度固定的容器中无法自动跳行,而是在最后边被挤成一列,宽度只有一个字符宽,我们可以用span标签包裹A标签,span标签设display:inline-block。

    2、IE6 7中绝对定位的元素在没有设置top(bottom)和left(right)的情况下会不受控制,所有必须设置这两个值。

    3、span标签在IE6中为设置float属性的时候,会与同行的其他元素上下不对齐,且局左边有一定的间隙,会导致将后面的元素挤出去,另外span最好设置全局属性display为inline-block,这样可以减少一些不必要的调试。

    4、label标签是一个很不好控制的标签,我们习惯与将input[checkbox]、input[radio]这两个标签放于label中,方便于点击text文本的时候也能选中,这两个标签在谷歌等中无法与文本水平对齐,我们可以设置float属性,然后就可以设置margin-top,写个hack *margin在IE中为零,就能很好的处理这个问题。

    5、右浮动元素,如果同行还有其他元素不设置左浮动,在IE6 7中将会掉到下一行。

    6、margin-bottom,在IE6 7中是无效的,所以最好设置padding-bottom,或者下面的元素设置margin-top。

    7、ul列表标签中的li设置margin属性的时候在ie6中会被双倍放大,所以最好用padding属性代替间距。

    8、input[button]如果不需要边框的话必须设为border:none 0;否则在IE6中还是会显示边框。

    9、左图又文字的结构,img标签设置左浮动,p标签可以只设置个padding-left或设置右浮动,否则在IE7中还是会被挤下来。

    10、样式注释*/前面加上一个空格隔开,否则在IE6中如果注释字符是奇数个的时候会跟*/解析成另一个字符。

    11、截字省略号text-overflow:ellipsis;white-space:nowrap;overflow:hidden; 在Firefox中是不能支持,所以必须设置外围元素的高度。

    12、img标签在IE6 7中左右又一个像素的间距,必须给img设置左浮动,img最好设置全局属性display属性为block。

    感谢补充指正

    原创(川也设计-泸州网站制作)转载请注明出处www.tranye.com

  • 相关阅读:
    PAT顶级 1024 Currency Exchange Centers (35分)(最小生成树)
    Codeforces 1282B2 K for the Price of One (Hard Version)
    1023 Have Fun with Numbers (20)
    1005 Spell It Right (20)
    1092 To Buy or Not to Buy (20)
    1118 Birds in Forest (25)
    1130 Infix Expression (25)
    1085 Perfect Sequence (25)
    1109 Group Photo (25)
    1073 Scientific Notation (20)
  • 原文地址:https://www.cnblogs.com/reweb/p/3054884.html
Copyright © 2011-2022 走看看