Css 引导组合下拉按钮空间问题

我正在使用一个引导分离按钮下拉列表，但是我在按钮和下拉菜单按钮之间有一个空间。此问题仅在safari浏览器中出现。它可以与其他浏览器配合使用。我在这里使用代码：

---

即使在官方网站上，它也会中断，并在“拆分”按钮下拉列表中留有空间。这只是safari的问题。在其他浏览器中工作得相当好。我检查了2-3个不同的safari安装。

这个错误已经被报告为allready，而且它的立场似乎是safari for windows根本不受引导支持

此外，这个错误似乎只发生在windows版本的safari上

如果你不能忍受这个错误，试着瞄准safari，但确保你在win和mac上都测试它，这样你就不会在win上修复它，而是在mac上破坏它

针对safari的方法：

添加一个额外的#只能由safari阅读（非常粗糙）

如何仅针对使用js的Windows代理：

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

如果用户使用windows，这会将类win添加到正文中

之后，您可以使用css将safari作为目标：

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

    .win { height: 100%; }

}

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

在那之后，你只需要调整，不管是什么导致了问题

很可能是按钮元素上的填充或边距，也可能是宽度。试着玩这些，如果没有其他帮助相对位置，甚至负边际可能会有所帮助

引导程序中的相关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 -->

现在你可以离开了

---

或者干脆不支持windows上的safari:）

使用

@媒体屏幕和（-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;
}}

---

safari是否已经在windows上正式停止使用？不知道。我只知道bootstrap不支持它。

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

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

}

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