0

このサイトを作りました。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;
    }
}
4

2 に答える 2

0

Chromeでこれに数回問題が発生しました。ほとんどの場合、私はそれを理解することができますが、いくつかの場合、これを使用することに頼らなければなりませんでした：css_browser_selector.js

基本的にそれはあなたがこのようにcssを書くことを可能にします：

.gecko .account-links a{}

次に、そのcssをgeckoエンジン（つまりFirefox）を使用するブラウザーに適用します。私はいくつかの本番サイトで使用していますが（主にIEの場合ですが、Firefoxの場合も1〜2回）、問題はありません。

つまり、Chromeで機能しているものを壊すことなく、FirefoxとSafariのソリューションを使用できます。

于 2013-02-22T19:02:32.053 に答える
0

これは、の接頭辞なしを使用しているためbox-sizingです#shop-meta .account-links a。追加する-moz-box-sizing: border-box と-webkit-box-sizing: border-box、意図したとおりに機能するはずです。

編集：実際、Safari（Windowsではv5.1.7を使用）にボックスサイズ設定が正しく機能しないバグがあることがわかりました。そのブラウザの解決策は、に設定float: leftすること.account-links aです。必要ありません-webkit-box-sizing。

于 2013-02-22T19:19:51.557 に答える