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

Question

我正在尝试让我的应用程序跨浏览器兼容。在Microsoft 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。它有默认的引导样式

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]-->

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