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

Question

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

可以做的快速入侵是检测Edge浏览器并应用特定的宽度。但我认为这不是一个最佳解决方案。谁能建议更好的解决方案？ 如果我将宽度设置为22％，那么它在边缘浏览器中显示正常但铬显示中断。所以解决方案也出来了:( 请帮忙！

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

必须在＆lt; body＆gt;之前包含它元素（即在＆lt; head＆gt;中）