zoukankan      html  css  js  c++  java
  • 浏览器兼容性问题

    1.IE6双倍边距问题:

     网上有很多关于该问题的文章,园子里面也有很多。这些大多是从“已知问题”的角度去解决,但我们的浏览器不会在发现问题的时候alert一个框告诉你:出现IE6双倍边距BUG啦!正向面对问题时,我们只有现象,出现这个BUG很常见的现象是,在其他浏览器中排版很好的界面,在IE6中有元素被挤下去了。如果出现这个问题,则要考虑这个BUG了,当然,能提前避免会更加好。

     

     在ie6下,如果给对某个标签使用了float属性,同时设置了Margin:10px 0 0 10px;但是ie6下左边距却有20px;在网上搜索了这个相关问题,查到解决方法是设置display属性为Inline即可;

     一下几个问题需要注意:

    (1)块级对象display的默认属性为:block;当同时设置浮动和边距的时候,在ie6下就会出现双倍边距的问题,

    (2)第二个对象和第一个对象之间不存在双倍边距的问题,因为浮动对象都有其相对的对象,只有相对于其父对象的浮动才会出现这样的问题,第一个对象是相对父对象的,第二个对象是相对第一个对象的,所以第二个对象不会出现这个问题,而且上下边距不会出现这样的问题

    (3)在一些比较特殊的布局中,可能需要使用下列方式

          margin:10px 0 0 10px(标准属性);*margin:10px 0 0 10px;(*ie7识别属性)_margin:10px 0 0 5px-ie7识别属性);

    2.不同浏览器的标签默认的margin和padding不同 

      问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 

      碰到频率:100% 

      解决方案

      CSS里加一行

      *{margin:0;padding:0;}

      或者引入样式重置的css文件。(自己写或者在网上搜

      备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。(平时写些小东西可以,如果做大型项目的话最好还是引入样重置的CSS文件.)

    3.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行

      碰到频率:90%稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题

      解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

      备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    4.设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

      解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度(在书写的时候用到浮动记得清浮动

      备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    5.IE6里的间距比超过设置的间距

      碰到几率:20%

      解决方案:在display:block;后面加入display:inline;display:table;

      备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

    6.图片默认有间距  

      问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

      碰到几率:50%

      解决方案:使用float属性为img布局 

      备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我又一次使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我一般不太会用

  • 相关阅读:
    SpringBoot实现原理
    常见Http状态码大全
    forward(转发)和redirect(重定向)有什么区别
    1094. Car Pooling (M)
    0980. Unique Paths III (H)
    1291. Sequential Digits (M)
    0121. Best Time to Buy and Sell Stock (E)
    1041. Robot Bounded In Circle (M)
    0421. Maximum XOR of Two Numbers in an Array (M)
    0216. Combination Sum III (M)
  • 原文地址:https://www.cnblogs.com/patriot/p/5627037.html
Copyright © 2011-2022 走看看