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

Question

我有一种方案，当焦点放在a元素上时，焦点轮廓在Internet Explorer 10中无法正确显示。

嵌套在每个a元素内的是一系列div元素，并且在最底层的div内是一个img元素。

当我a通过IE10 标签到每个元素时，焦点轮廓显示在a元素组的右侧偏移。当我在Chrome中查看页面时，焦点轮廓会完美显示。

CSS充斥着我遇到问题的现有项目的样式。

Answer 1

您尚未调整元素的display属性a，因此即使它们“包含”了块级div元素，它们仍然显示内联。结果符合CSS2.1规范的这一部分其中描述了包含块子级的内联应该如何表现。

没有一个浏览器会自动调整显示模式，但是Chrome似乎正在做的是猜测其默认轮廓的位置，并根据其最佳猜测进行绘制。但是，关于此的真正奇怪的是，它并不总是这样做。调整轮廓样式后，轮廓行为立即恢复为类似于在其他浏览器上看到的外观：

a:focus{
    outline-style: dashed;
}

不幸的是，由于轮廓渲染的定义不明确，因此无法判断任何浏览器在这方面是否存在错误。尽管HTML5明确允许a元素包含大多数其他元素，但它根本没有说明应如何调整其显示模式，因此看起来浏览器对此无能为力。但是，这里的主要问题是概述。

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