bootstrap组合框下拉按钮空间问题
我使用的是bootstrap split button dropdown，但是在按钮和dropdown menu按钮之间有一个空格。这个问题只与safari浏览器一起出现。它可以与其他浏览器很好地协同工作。我在这里使用代码：
Bootstrap split dropdown menu
即使在官方网站上，它也会中断，并在拆分按钮下拉列表中留出空格。这只是safari的一个问题。在其他浏览器中运行得相当好。我检查了2-3个不同的safari安装。
回答 2
Stack Overflow用户
发布于 2013-01-05 19:31:00
这个bug已经被报道过了，看起来好像是bootstrap根本不支持windows版的safari。
https://github.com/twitter/bootstrap/issues/5644
此外，这个bug似乎只出现在windows版本的safari上。
如果你不能接受这个bug，试着瞄准safari，但要确保你在win和mac上都测试了它，这样你就不会在win上修复它，而是在mac上破坏它。
针对safari的方法：
添加额外的#只会被safari读取(非常麻烦)
##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 :)
Stack Overflow用户
发布于 2013-02-07 21:53:57
使用@media screen and (-webkit-min-device-pixel-ratio:0)的问题是，这也针对Chrome浏览器。
我找到了一个使用z索引定位的解决方案，这解决了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;
}}https://stackoverflow.com/questions/14170529
复制相似问题
腾讯云开发者
