兼容IE 6/7 inline-block

最新推荐文章于 2021-06-15 20:15:17 发布

梦你所梦

最新推荐文章于 2021-06-15 20:15:17 发布

阅读量782

点赞数

分类专栏： css 文章标签： IE inline-block css 兼容

本文链接：https://blog.csdn.net/yangzhihello/article/details/38326367

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title></title>
  <style type="text/css">
      .html,body,ul{
          margin:0px;
          padding:0px;
      }
      .inline-demo{
         width: 100px;
          height:30px;
          display:inline-block;/*for firefox and chrome and ie8+ */
          *display:inline;/*for ie6 and ie 7*/
          zoom:1;/*for trigger the ie hasLayout method*/
          height:30px;
          background:red;
          margin:10px;
          padding:10px;
          font-size:14px;
      }
  </style>
</head>
<body>
    <div>
      <!-- font-size 解决ie 67 display:inline 引起的留白bug-->
      <!--这边可能还有一个bug, 在ie 9 10 下, li 的宽度似乎比chrome的宽度要小2个像素-->
        <ul style="background:green;font-size:0px;">
            <li class="inline-demo">ie6-7-inline-block</li>
            <li class="inline-demo">ie6-7-inline-block</li>
            <li class="inline-demo">ie6-7-inline-block</li>
            <li class="inline-demo">ie6-7-inline-block</li>
            <li class="inline-demo">ie6-7-inline-block</li>
        </ul>
    </div>
</body>
</html>

梦你所梦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
兼容IE 6/7 inline-block

.html,body,ul{ margin:0px; padding:0px; } .inline-demo{ width: 100px; height:30px; display:inline-block;/*for firefox and chrome and ie8+ *
复制链接

扫一扫

专栏目录