Question

我做了this site。在Chrome（v24.0）上，所有内容都按预期显示。当我在Safari或Firefox中查看它时，布局中断：右上角的“查看购物车”和“结帐”链接溢出到额外的行。这很难描述，但比较他们在Chrome（正确）与Firefox和Safari（错误）中的看法，这应该是显而易见的。

我该如何解决这个问题？我尝试过的所有功能都能成功解决Firefox和Safari中的问题，只是在Chrome中打破了它。

我目前的CSS（Sass）：

.account-links {
    font-size: 0;
}

.account-links a {

    box-sizing: border-box;
    width: 90px;

    margin: 0px;
    font-size:9pt;

    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear,
                                 left top, left bottom,
                                 color-stop(0.05, #f9f9f9),
                                 color-stop(1, #e9e9e9) );
    background:-moz-linear-gradient( center top,
                                     #f9f9f9 5%, #e9e9e9 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
    background-color:#f9f9f9;
    border-top:1px solid #dcdcdc;
    border-bottom:1px solid #dcdcdc;
    &:first-child {
      border-right:1px solid #dcdcdc;
    }
    display:inline-block;
    color:#666666;
    font-family:arial;
    font-weight:bold;
    padding: 5px 0px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    &:hover {
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
      background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
      background-color:#e9e9e9;
    }
    &:active {
   position:relative;
      top:1px;
    }
}

Answer 1

我在Chrome上遇到过几次问题。大部分时间我都能搞清楚，但有几次我不得不求助于此：css_browser_selector.js

基本上它允许你写这样的css：

.gecko .account-links a{}

然后将css应用于使用gecko引擎（即Firefox）的浏览器。我在几个生产网站上使用它（主要用于IE，但对Firefox也是一次或两次），我没有遇到任何问题。

这意味着您可以使用适用于Firefox和Safari的解决方案，而不会破坏Chrome中的功能。

Answer 2

那是因为你对box-sizing使用了没有前缀的#shop-meta .account-links a。添加-moz-box-sizing: border-box ~~和-webkit-box-sizing: border-box~~ ，它应该按预期工作。

编辑：实际上我发现Safari中有一些错误（使用v5.1.7 for Windows）会阻止大小调整正常工作。该浏览器的解决方案是在float: left上设置.account-links a。您不需要-webkit-box-sizing。

内联块在Firefox / Safari中显得比Chrome更广泛，溢出过线

2 个答案: