我有一个场景，当焦点被赋予 a 元素时，焦点轮廓在 Internet Explorer 10 中没有正确表示。
在每个a 元素内嵌套的是一系列div 元素，在最低级别的div 内是一个img 元素。
当我切换到每个 a 元素（通过 IE10）时，焦点轮廓显示在 a 元素组的右侧偏移。当我在 Chrome 中查看页面时，焦点轮廓完美显示。
我已经能够在JSFiddle 中重现这一点。
CSS 因我遇到问题的现有项目中的样式而臃肿。
【问题讨论】：
<div>（块级元素）在<a>（内联级元素）内是无效的。但是我想上次我说的时候有人告诉我我错了......
标签： html css internet-explorer
您尚未调整display 元素的display 属性，因此它们仍然显示内联，即使它们“包含”块级div 元素。结果与this section of the CSS2.1 spec 一致，其中描述了包含块子级的内联应如何表现。
没有一个浏览器会自动调整显示模式，但 Chrome 似乎在做的是猜测其默认轮廓的位置并根据其最佳猜测绘制它。然而，真正奇怪的是它并不总是这样做。调整轮廓样式的那一刻，the outline behavior immediately reverts to something similar to what you see on other browsers：
a:focus{
outline-style: dashed;
}
不幸的是，由于轮廓渲染定义不明确，因此无法判断是否有任何浏览器在这方面存在错误。尽管 HTML5 明确允许 a 元素包含大多数其他元素，但它并没有说明应该如何调整它们的显示模式（如果有的话），所以看起来浏览器根本不做任何事情。不过，这里的主要问题是大纲。
原始问题的简单解决方案当然是将a 元素的display 样式显式设置为默认inline 以外的其他内容。这至少会通过使其更可预测来改善轮廓渲染。您可能希望也可能不希望将 div 元素的样式移动到您的 a 元素，这取决于 divs 在您的布局中扮演的角色以及它们是否有必要。事实上，由于我在规范中描述的内容，您在 a 上拥有的大多数样式实际上并没有生效。
【讨论】：