我有一个场景，当焦点被赋予a元素时，在Internet Explorer 10中没有正确表示焦点轮廓。
嵌套在每个a元素中的是一系列div元素，在最低级别的div中是img元素。
当我选中每个a元素时（通过IE10），焦点轮廓显示在a元素组右侧的偏移量。当我在Chrome中查看该页面时，焦点轮廓会完美显示。
我已经能够在JSFiddle中重现这一点。
CSS对现有项目的样式很臃肿我遇到了问题。
答案 0 :(得分：3)
您尚未调整display元素的a属性，因此它们仍然显示内联，即使它们“包含”块级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元素包含大多数其他元素，但它并未说明应如何调整其显示模式（如果有的话），因此看起来浏览器根本不对它做任何事情。不过，这里的主要问题是大纲。
原始问题的简单解决方案当然是将display元素的a样式明确设置为默认inline以外的其他格式。这将至少通过使其更具可预测性来改善轮廓渲染。您可能希望也可能不希望将div元素的样式移动到a元素，具体取决于div在您的布局中扮演的角色类型以及是否是必要的。事实上，你在a上拥有的大多数样式实际上并没有生效，因为我已经从规范中描述过了。