Microsoft Edge 浏览器中的 CSS 对齐问题

Question

我正在尝试使我的应用程序跨浏览器兼容。在 Microsoft Edge 浏览器中进行测试时，我发现 Edge 计算宽度的方式与所有其他浏览器不同。例如。按钮在 Edge 中出现扭曲，而在所有其他浏览器（Chrome、Firefox、IE11）中完美显示。

可以做的快速破解是检测边缘浏览器并应用特定的宽度。但我认为这不是最佳解决方案。任何人都可以提出更好的解决方案吗？ 如果我将宽度设置为 22%，那么它在 Edge 浏览器中显示正常，但 chrome 显示中断。所以这个解决方案也出来了:( 请帮忙！

<div class="btn-toolbar pull-right">
    <button type="button" class="btn btn-default btn-no-trans">
        <i class="icon icon-dashboard"></i>
        <span translate>
            Manage Dashboards
        </span>
    </button>



    <button type="button" class="btn btn-default btn-no-trans" id="editDashboardBtn">
        <i class="icon icon-pencil"></i>
        <span translate>
            Edit Dashboard
        </span>
    </button>

    <button type="button" class="btn btn-default btn-no-trans">
        <i class="icon icon-trash"></i>
        <span translate>
            Delete Dashboard
        </span>
    </button>

    <button type="button" class="btn btn-default btn-no-trans">
        <i class="icon icon-refresh"></i>
        <span translate>
            Refresh
        </span>
    </button>
</div>

我没有对任何按钮应用任何额外的 CSS。它具有默认引导样式

Answer 1

尝试使用html5shiv，它基本上是一个 HTML5 IE 启用脚本，应该可以在 IE 6,7 和 8 中启动引导程序。这也可以像这样直接热链接：

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

它必须包含在

元素之前（即在 中）