IE偏移并忽略定位焦点轮廓的高度/宽度？

Question

我有一个场景，当焦点被赋予a元素时，在InternetExplorer10中焦点轮廓没有被正确表示。

嵌套在每个a元素中的是一系列div元素，在最低级别div中的是img元素。

当我对每个a元素进行制表时（通过IE10），焦点轮廓将显示a元素组右侧的偏移量。当我在Chrome中查看页面时，焦点轮廓会完美地显示出来。

我已经能够在JSFIDLE中重现这一点。

CSS是臃肿的风格从现有的项目，我有这个问题。

Answer 1

您尚未调整a元素的display属性，因此它们仍在内联显示，即使它们“包含”块级div元素。结果与CSS2的本节一致。1个规范，其中描述了包含块子级的内联线的行为。

没有一款浏览器会自动调整显示模式，但Chrome似乎在猜测默认轮廓的位置，并根据其最佳猜测绘制轮廓。然而，关于这一点，真正奇怪的是，它并不总是这样做。当您调整大纲样式时，大纲行为立即恢复为类似于您在其他浏览器上看到的内容：

a:focus{
    outline-style: dashed;
}

不幸的是，因为大纲渲染定义不好，所以无法判断浏览器在这方面是否有问题。尽管HTML5明确允许一个元素包含大多数其他元素，但它并没有说明它们的显示模式应该如何调整，如果有的话，所以看起来浏览器对此无能为力。然而，这里的主要问题是轮廓。

解决原始问题的简单方法当然是将a元素的show样式显式设置为默认inline以外的样式。这至少会通过使轮廓渲染更可预测来改进轮廓渲染。您可能希望也可能不希望将您的div元素的样式移动到您的a元素中，这取决于这些div在您的布局中扮演什么样的角色以及它们是否是必要的。事实上，您在a上拥有的大多数样式实际上并没有生效，因为我从规范中描述了这些。