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

百度翻译此文   有道翻译此文
问 题

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:

    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规范的这一部分,其中描述了包含块儿童的内联应该如何表现。


  a:focus {

$ b

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

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

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

微信公众号搜索 “ IT屋 ” ,选择关注