IE 11以不同于其他浏览器的方式显示CSS

Question

我有这个项目，我正在研究它，它在不同的浏览器中显示不同（想象一下）。 CSS在我尝试过的每个浏览器（chrome，safari，firefox）中运行良好，除了IE11（再次，想象一下）。这是IE版本的图片：

以下是 假设 的样子：

现在，我已经浏览了Chrome和IE上的开发工具，结果如下。

IE：

铬：

所以，正如您在图片中看到的那样，在IE中，bwizard-steps button::before和bwizard-steps button::after被标记出来，但它们在Chrome中正在按预期工作。

任何想法为什么会这样？我查了一下，IE11应该支持::before和::after标签。但它显然无视它们。我甚至尝试进入IE的兼容模式，这看起来更糟糕。

Answer 1

我遇到过类似的问题。

对我有用的解决方案是给出按钮overflow: visible;

工作示例（IE9 +）：http://jsfiddle.net/aBfF8/1/

Answer 2

问题可能是您有button个标记作为ul标记的直接后代。在有效的HTML标记中，ul的唯一直接子项应为li。

你应该在li标签中包装你的按钮 - 但是你必须进行一些CSS更改，这样你的列表项就不是垂直的了。 float: left;对其进行了更改，使其显示为您想要的方式。

编辑：如果您向我提供适当的HTML和CSS（理想情况下在jsfiddle中）

，我可以为您提供更详细的解决方案。