我正在使用引导拆分按钮下拉菜单,但在按钮和下拉菜单按钮之间有一个空格。此问题仅与 safari 浏览器有关。它适用于其他浏览器。我正在使用这里的代码:
即使在官方网站上,它也会中断并在拆分按钮下拉列表中有一个空格。这只是 safari 的问题。在其他浏览器中运行良好。我检查了 2-3 个不同的 safari 安装。
我正在使用引导拆分按钮下拉菜单,但在按钮和下拉菜单按钮之间有一个空格。此问题仅与 safari 浏览器有关。它适用于其他浏览器。我正在使用这里的代码:
即使在官方网站上,它也会中断并在拆分按钮下拉列表中有一个空格。这只是 safari 的问题。在其他浏览器中运行良好。我检查了 2-3 个不同的 safari 安装。
已经报告了这个错误,而且似乎立场是引导程序根本不支持 Windows 的 safari。
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 :)
使用的问题@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;
}}