Question

我正在使用引导分割按钮下拉菜单但是我在按钮和下拉菜单按钮之间有一个空格。此问题仅适用于Safari浏览器。它适用于其他浏览器。我正在使用此处的代码：

Bootstrap split dropdown menu

即使在官方网站上，它也会在分割按钮下拉列表中断开并有空格。这只是safari的一个问题。在其他浏览器中运行得相当好。我检查了2-3种不同的野生动物园。

Answer 1

这个bug已经全部报告过了，而且看起来似乎是bootstrap不支持windows的safari。

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

此外，这个错误似乎只发生在Safari版本的Windows版本上。

如果你不能忍受这个bug，请尝试定位safari，但要确保你在win和mac上测试它，所以你不要在win上修复它但在mac上打破它。

瞄准野生动物园的方法：

添加额外的＃只会被safari（非常hacky）读取

##id {width:100px;}

如何仅使用js：

定位Windows代理

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

如果用户使用windows，这会将类win添加到body。

之后，您可以使用css定位safari：

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

    .win { height: 100%; }

}

结果是，您将只针对Windows上的safari。

之后你只需要调整，无论是什么导致问题。

很可能是按钮元素上的填充或边距，或者可能是宽度。尝试使用这些，如果没有其他任何帮助相对位置，甚至负边距可能会有所帮助。

来自bootstrap的相关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上的safari：）

Answer 2

使用@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;
}}

bootstrap组合下拉按钮空间问题

2 个答案: