2

ブートストラップ分割ボタンのドロップダウンを使用していますが、ボタンとドロップダウンメニューボタンの間にスペースがあります。この問題は、Safariブラウザでのみ発生します。他のブラウザでも問題なく動作します。私はここからコードを使用しています：

ブートストラップ分割ドロップダウンメニュー

公式ウェブサイトでも壊れて、分割ボタンのドロップダウンにスペースがあります。これはサファリだけの問題です。他のブラウザでもかなりうまく機能します。サファリの2〜3種類のインストールを確認しました。

4

2 に答える 2

2

このバグはすでに報告されており、Windows用のサファリは単にブートストラップでサポートされていないというスタンスのようです。

https://github.com/twitter/bootstrap/issues/5644

さらに、このバグはWindows版のsafariでのみ発生するようです。

このバグに耐えられない場合は、サファリをターゲットにしてみてください。ただし、winとmacの両方でテストするようにしてください。そうすれば、winで修正せず、macで壊してください。

サファリをターゲットにする方法：

＃を追加すると、safariによってのみ読み取られます（非常にハッキー）

##id {width:100px;}

jsでWindowsエージェントのみをターゲットにする方法：

if (navigator.appVersion.indexOf("Mac")!=-1) {
} else {
    $('body').addClass('win');
}

これにより、ユーザーがウィンドウを使用している場合、クラスwinがbodyに追加されます。

その後、cssでサファリをターゲットにできます。

@media screen and (-webkit-min-device-pixel-ratio:0) {

    .win { height: 100%; }

}

その結果、Windowsのサファリのみをターゲットにすることになります。

その後、問題の原因が何であれ、調整する必要があります。

ほとんどの場合、ボタン要素のパディングまたはマージン、あるいは幅です。相対的な位置に役立つものが他にない場合、または負のマージンでさえ役立つ可能性がある場合は、これらで遊んでみてください。

ブートストラップからの関連HTML：

<!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-primary">Action</button>
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->

ドロップダウンメニューをターゲットにする場合は、次を使用します。

@media screen and (-webkit-min-device-pixel-ratio:0) {

    .win .dropdown-menu { height: 100%; }

}

今、あなたはハックすることができます！

または、Windowsでサファリをサポートしないでください:)

于 2013-01-05T11:30:59.883 に答える
0

使用に関する問題@media screen and (-webkit-min-device-pixel-ratio:0)は、これがChromeブラウザも対象としていることです。

z-indexポジショニングを使用することで解決策を見つけました。これにより、SafariとChromeの両方のブラウザーで問題が修正され、JavaScriptやHTMLコードの変更は必要ありません。

@media screen and (-webkit-min-device-pixel-ratio:0) {
.btn-group > .btn + .btn {
    margin-left: -5px;
}  
.btn-group:hover a {
    z-index:1;
}
.btn-group:hover button{
    z-index:10;
}
.input-append input{
    z-index:1;
}
.input-append  a{
    z-index:10;
}}
于 2013-02-07T13:53:56.990 に答える