IE偏移并忽略锚点大纲的高度/宽度?(IE offsetting and ignoring height/width of anchor focus outlines?)

HTML/CSS IT屋
百度翻译此文   有道翻译此文
问 题

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 of div elements and within the lowest-level div is an img element.

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.

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 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.

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 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.

本文地址:IT屋 » 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 {
outline-style:dashed;





$ b

不幸的是,由于轮廓渲染定义不明确,所以无法判断的浏览器在这方面有问题。尽管HTML5明确允许 a 元素包含大多数其他元素,但它并没有说明它们的显示模式应该如何调整,因此它看起来像浏览器一样对此无能为力。然而,这里的主要问题是大纲。



原始问题的简单解决方案当然是设置 display a 元素的$ c>样式明确地指定为默认内联之外的其他元素。这至少可以通过使其更具可预测性来改善轮廓渲染。您可能希望也可能不希望将您的 div 元素的样式移动到您的 a 元素中,具体取决于这些 div 在你的布局中扮演什么样的角色,以及他们是否有必要。实际上,由于我在规范中描述的内容,大多数 a 的样式实际上并没有生效。


本文地址:IT屋 » IE偏移并忽略锚点大纲的高度/宽度?

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起