码迷,mamicode.com
首页 > 其他好文 > 详细

我所遇到的页面兼容问题

时间:2015-06-25 15:25:15      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

1,margin 加倍的问题:

    设置了float的div在ie浏览器下设置的margin会加倍。解决的办法:在float的div上面加上display:inline.

2,清除浮动问题:

  这个问题还是挺简单的,知道一点就好。哪里用了浮动,哪里的上级就清除浮动,目前我还没发现这么用会有问题。下面是代码例子:

<ul class="cf">
      <li class="fl"></li>
      <li class="fl"></li>
      <li class="fr"></li>
</ul>
<style> .fl{float:left;} .fr{float:right;} .cf{zoom:1;} .cf:after{display:table;clear:both;content:"";overflow:hidden;} </style>

3,display:inline-block引起的间隙问题:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

代码:
ul{font-size:0;}
li{fotn-size:16px;displan:inline-block;}

解释:设置了display:inline-block后,相邻的li会有空白的间隙,这是由inline-block引起的。解决的办法如上面的代码所示。还有个办法就是把li都写在一行内,不要有间隙。

 

 

未完待续。。。

我所遇到的页面兼容问题

标签:

原文地址:http://www.cnblogs.com/qianrong/p/4599953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!