IE 偏移和忽略锚焦点轮廓的高度/宽度? [英] IE offsetting and ignoring height/width of anchor focus outlines?

问题描述

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

I've got a scenario where focus outlines are not being represented correctly in Internet Explorer 10 when focus is given to an a element.

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

Nested inside each a element is a series of div elements and within the lowest-level div is an img element.

当我用 Tab 键切换到每个 a 元素时(通过 IE10)，焦点轮廓显示在 a 元素组右侧的偏移量.当我在 Chrome 中查看页面时，焦点轮廓完美显示.

When I tab to each a element (via IE10), focus outlines show up offset to the right of the group of a elements. When I view the page in Chrome, focus outlines show up perfectly.

我已经能够在 JSFiddle 中重现这一点.

I've been able to reproduce this in a JSFiddle.

CSS 因我遇到问题的现有项目中的样式而变得臃肿.

CSS is bloated with styles from the existing project I'm having the issue in.

推荐答案

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

You haven't adjusted the display property for your a elements, so they're still displaying inline, even though they're "containing" block-level div elements. The result is in accordance with this section of the CSS2.1 spec which has a description on how inlines containing block children should behave.

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

None of the browsers are automatically adjusting the display modes, but what Chrome appears to be doing is guessing the location of its default outline and drawing it according to its best guess. The really weird thing about this, though, is that it doesn't always do this. The moment you adjust the outline style, the outline behavior immediately reverts to something similar to what you see on other browsers:

a:focus{
    outline-style: dashed;
}

遗憾的是，由于轮廓渲染定义不明确，因此无法判断是否有任何浏览器在这方面存在问题.虽然 HTML5 明确允许 a 元素包含大多数其他元素，但它没有说明应该如何调整它们的显示模式，如果有的话，所以看起来浏览器只是不做任何事情.不过，这里的主要问题是轮廓.

Unfortunately, because outline rendering is poorly defined, it's not possible to judge if any of the browsers are buggy in this aspect. And although HTML5 explicitly allows a elements to contain most any other element, it does not state how their display mode should be adjusted, if at all, so it looks like browsers just don't do anything about it. The main issue here, though, is with outlines.

原始问题的简单解决方案当然是将 a 元素的 display 样式显式设置为默认 inline.这将至少通过使其更可预测来改善轮廓渲染.您可能希望也可能不希望将 div 元素的样式也移动到 a 元素，这取决于那些 div 的角色类型> 在您的布局中发挥作用以及它们是否必要.实际上，由于我在规范中描述的内容，您在 a 上拥有的大多数样式实际上并未生效.

The easy solution to the original problem is of course to set the display style of your a elements explicitly to something other than the default inline. This will at the very least improve outline rendering by making it more predictable. You may or may not wish to move the styles for your div elements to your a elements instead as well, depending on what sort of role those divs play in your layout and whether they are necessary. As it is, most of the styles that you do have on a aren't actually taking effect because of what I've described from the spec.

这篇关于IE 偏移和忽略锚焦点轮廓的高度/宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！