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

Question

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

可以快速破解的是检测 Edge 浏览器并应用特定于它的宽度。但我认为这不是最佳解决方案。任何人都可以建议更好的解决方案吗？如果我将宽度设置为 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。它具有默认的 Bootstrap 样式

Answer 1

尝试使用 html5shiv ，它基本上是一个 HTML5 IE 启用脚本，应该可以在 IE 6,7 和 8 中运行 Bootstrap 。这也可以像这样直接热链接:

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

它必须包含在 元素之前(即在 中)