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

【问题标题】：bootstrap combo dropdown buttons space issue引导组合下拉按钮空间问题
【发布时间】：2013-02-07 21:53:56
【问题描述】：

我正在使用引导拆分按钮下拉菜单，但在按钮和下拉菜单按钮之间有一个空格。此问题仅与 safari 浏览器有关。它适用于其他浏览器。我正在使用这里的代码：

Bootstrap split dropdown menu

即使在官方网站上，它也会中断并在拆分按钮下拉列表中有一个空格。这只是 safari 的问题。在其他浏览器中运行良好。我检查了 2-3 个不同的 safari 安装。

【问题讨论】：

标签： css twitter-bootstrap safari

【解决方案1】：

这个错误已经被报告了，而且似乎立场是 safari for windows 根本不支持 bootstrap。

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

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

如果您不能忍受这个错误，请尝试以 safari 为目标，但请确保您在 win 和 mac 上都对其进行测试，这样您就不会在 win 上修复它，而是在 mac 上破坏它。

定位 safari 的方法：

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

##id {width:100px;}

如何使用 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 -->

如果您想定位下拉菜单，请使用：

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

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

}

现在你可以破解了！

或者，根本不支持 Windows 上的 safari :)

【讨论】：

safari 真的在 windows 上已经正式停止了吗？
不知道。我所知道的是引导程序不会支持它。

【解决方案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;
}}

【讨论】：