mySonitrol 浏览器兼容总结

1、 火狐浏览器,父级有 white-space: nowrap; 样式  内部@ 向右浮动就会回行;

        IE10 +  样式跟谷歌一致, 项目不需要兼容IE10以下, 所以在这里IE10以下都忽略;

        下面图片是火狐浏览器跟谷歌浏览的的对比;


  火狐浏览器


        谷歌浏览器


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul {
            width: 200px;
            list-style: none;
            background: pink;
        }

        a {
            white-space: nowrap;
        }

        .f-r {
            float: right;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a>
                <i>&</i>
                Emmappp
                <i class="f-r">@</i>
            </a>
        </li>
    </ul>

</body>

</html>

项目要求文本必须在一行显示, 所以不能去掉 white-space: nowrap; 样式 

最终解决方法:@-moz-document url-prefix()  方法内的样式只对火狐浏览器生效!

@-moz-document url-prefix() {
   .f-r{
        margin-top: -18px;
    }
}

阅读更多
想对作者说点什么? 我来说一句

浏览器兼容报告

2012年10月08日 207KB 下载

CSS各浏览器兼容解决总结

2011年12月17日 25KB 下载

CSS属性、浏览器兼容与网页布局

2009年07月26日 1.8MB 下载

没有更多推荐了,返回首页

关闭
关闭