mySonitrol 浏览器兼容总结

原创 2018年04月16日 13:37:49

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;
    }
}

浏览器兼容总结.txt

  • 2010年11月22日 22:47
  • 61KB
  • 下载

浏览器兼容报告

  • 2012年10月08日 13:54
  • 207KB
  • 下载

常见的浏览器兼容性问题总结(有自己遇到的还有网上大神总结的)

常见的浏览器兼容性问题总结 1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率:100% 解决方案:使用CSS通配符*,设置内外补丁为0 *{ margin: 0; pa...
  • zhuwanwanshay
  • zhuwanwanshay
  • 2016-07-11 18:02:55
  • 2465

CSS各浏览器兼容解决总结

  • 2011年12月17日 09:33
  • 25KB
  • 下载

跨浏览器兼容性总结

跨浏览器兼容性总结   一、       CSS样式兼容 1.      FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真...
  • gingerredjade
  • gingerredjade
  • 2016-01-24 13:35:13
  • 1631

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

  • 2009年07月26日 23:16
  • 1.8MB
  • 下载

浏览器兼容总结

整理了些网络收集的有关兼容性的问题,原作者不详(侵删) ##不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。...
  • burning__33
  • burning__33
  • 2018-01-04 15:11:21
  • 46

前端开发中常遇到的浏览器兼容问题小结

web前端开发的浏览器兼容问题总结
  • AnterWang
  • AnterWang
  • 2016-11-25 18:04:36
  • 6498

浏览器兼容常见问题css兼容

  • 2013年08月30日 15:46
  • 13KB
  • 下载

web前端面试题之 CSS浏览器兼容性?

CSS浏览器兼容性? 答题技巧:因为这个问题主要是看你经验,一般有了开发经验的都会遇到这样的坑,你只要说出几个来大致就可以了。 1.对齐文本和文本输入框 问题: 当input元素在...
  • Wz1135640
  • Wz1135640
  • 2017-10-10 14:53:28
  • 477
收藏助手
不良信息举报
您举报文章:mySonitrol 浏览器兼容总结
举报原因:
原因补充:

(最多只允许输入30个字)