0

このjsFiddleをChromeやSafariなどのWebKitベースのブラウザーで表示し、FirefoxやInternetExplorerなどの非Webkitベースのブラウザーで表示したときに表示されるものと比較します。

それらが明らかに同じではないことがわかります。以下は、左側がChrome、右側がFirefoxです。非WebkitとWebkitの距離のパーセンテージの解釈を比較する画像。

この理由は、休眠中の小さなCSSマークアップは、他のすべてのブラウザーが解釈する方法と比較して、WebKitによって異なる方法で解釈されるためです。

span.upArrow.menu{
    margin: 36.1% 0 0 12.5%;
}

より正確には、WebKitは36.1％をページ幅の36.1％ではなく、要素の幅または高さの36.1％として解釈します。

そもそもパーセンテージを使用する理由は、画面のスケールに応じてサイトがスケールアップおよびスケールダウンするためです。このコードはメニュー用です。そのため、AndroidまたはiPhoneでデフォルトのブラウザを使用すると、サイトは正常に表示されます。しかし、Windows Phoneのコンテンツの中央、またはユーザーがOperaまたはFirefoxを使用している場合は、巨大な醜い三角形があります。

だから私の質問はになります。WebKitでこのバグを回避する方法はありますか？

可能であれば、Webkitブラウザと非Webkitブラウザに別々のマークアップを書くことができます。しかし、おそらくさらに良いのは、両方の場合に機能する解決策を見つけることです。

4

2 に答える 2

1

これは、矢印スパンの位置が適切でないために発生しています。そのスパン位置をとしてabsolute、menuButtonをとして作成しposition:relativeます。

div.menuButton{
    display: inline-block;
    width: 32%;
    padding: 2% 0;
    position:relative;
}
span.upArrow.menu{
    position:absolute;
    bottom:0; left:45%
}

デモ

于 2012-11-26T12:47:43.767 に答える
1

このフォークを見てください。

position: relativeレイアウトを実現するためにマージンを追加するのではなく、メニュー項目を設定して矢印を配置するように、アプローチを少し変更しました。

更新されたCSSは次のとおりです（追加のCSSを削除divしspan、セレクターから削除します。これらは必要ありません）。

.menuButton{
    display: inline-block;
    width: 32%;
    padding: 2% 0;
    position: relative;
}

.upArrow.menu{
    bottom: 0;
    left: 50%;
    margin-left: -15px;   
}

負のマージンは矢印の境界線の幅と一致し、レイアウトで他に何が起こっても常に正確な中心に配置されるようにします。

于 2012-11-26T12:48:14.647 に答える