IE偏移并忽略锚点大纲的高度/宽度? [英] IE offsetting and ignoring height/width of anchor focus outlines?
问题描述
我已经有了一个场景,当焦点放在 a
元素上时,焦点轮廓在Internet Explorer 10中没有正确表示。
在每个元素中嵌套是一系列
div
元素, level div是一个 img
元素。
当我对每个 a
元素(通过IE10),焦点轮廓显示偏移到 a
元素组的右侧。当我在Chrome中查看该页面时,焦点轮廓显示得很完美。
我已经能够在 JSFiddle 。
您还没有调整显示
a 元素的$ c>属性,所以它们仍然以内联方式显示,即使它们包含块级别 div 元素。结果符合 CSS2.1规范的这一部分,其中描述了包含块儿童的内联应该如何表现。
没有一个浏览器自动调整显示模式,但Chrome似乎在做的是猜测其默认轮廓的位置并根据其最佳猜测进行绘制。然而,这件事真的很奇怪,它并不总是这样做。在您调整大纲样式的那一刻,大纲行为立即恢复为类似于您在其他浏览器上看到的内容:
a:focus {
元素的$ c>样式明确地指定为默认
outline-style:dashed;
$ b不幸的是,由于轮廓渲染定义不明确,所以无法判断的浏览器在这方面有问题。尽管HTML5明确允许
a
元素包含大多数其他元素,但它并没有说明它们的显示模式应该如何调整,因此它看起来像浏览器一样对此无能为力。然而,这里的主要问题是大纲。
原始问题的简单解决方案当然是设置
display
a内联
之外的其他元素。这至少可以通过使其更具可预测性来改善轮廓渲染。您可能希望也可能不希望将您的div
元素的样式移动到您的a
元素中,具体取决于这些div
在你的布局中扮演什么样的角色,以及他们是否有必要。实际上,由于我在规范中描述的内容,大多数a 的样式实际上并没有生效。 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.Nested inside each
a
element is a series ofdiv
elements and within the lowest-level div is animg
element.When I tab to each
a
element (via IE10), focus outlines show up offset to the right of the group ofa
elements. When I view the page in Chrome, focus outlines show up perfectly.I've been able to reproduce this in a JSFiddle.
CSS is bloated with styles from the existing project I'm having the issue in.
解决方案You haven't adjusted the
display
property for youra
elements, so they're still displaying inline, even though they're "containing" block-leveldiv
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.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; }
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.The easy solution to the original problem is of course to set the
display
style of youra
elements explicitly to something other than the defaultinline
. 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 yourdiv
elements to youra
elements instead as well, depending on what sort of role thosediv
s play in your layout and whether they are necessary. As it is, most of the styles that you do have ona
aren't actually taking effect because of what I've described from the spec.这篇关于IE偏移并忽略锚点大纲的高度/宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!