解决 IE 中 CSS 问题的正式流程答案

【问题标题】：formal process for troubleshooting CSS issues in IE解决 IE 中 CSS 问题的正式流程
【发布时间】：2016-06-17 06:08:35
【问题描述】：

有没有办法像 Chrome 一样在 Internet Explorer 代码检查器中查看边距/填充/块边界？

在代码检查器中选择元素时，如果 IE 在视口中不提供视觉帮助，那么解决 Chrome 和 IE 之间的显示差异并不容易。

编辑：我在 IE11 中的 Dom Inspector 右侧找到了“布局”选项卡，但我无法轻易看到导致以下差异的原因在this page;

铬：

Internet Explorer：

注意Click Here 文本在 IE 中错位了吗？

我不知道解决 IE 中的 CSS 问题的正式流程。

Edit2：我现在看到文本 Click Here 后面的图像在 IE 中更宽/更高，这会将深蓝色框向下移动，导致文本显示在深蓝色框的顶部。

【问题讨论】：

【解决方案1】：

F12，dom explorer，在右侧面板上选择 Disposition 标签（第 3 个）:)

【讨论】：

【解决方案2】：

看来这解决了问题，我的 chrome 和 IE11 也有同样的问题

.btn-4 p#more-btn {
    color: #FFFFFF;
    font-size: 12px;
    margin: 66px 7px !important;
}

请注意，不建议使用 !important。您是否对 CSS 使用重置或等效项？

【讨论】：