边框上的大纲[Chrome上的行为不一致]

Question

鉴于div tabindex="0"，我在Firefox和Chrome上获得了这种奇怪的大纲行为。

.inner {
  margin-left: -20px;
  padding-left: 20px;
}

.context {
  margin-left: 40px;
  background-origin: content-box;
  background-color: limegreen;
}

.custom_outline:focus {outline: 3px solid blue;}

<div class="context" tabindex="0">
  <h1>Wrong outline on Firefox</h1>
  <h2>... but on Chrome is even WORSE</h2>
  <div>
    <div class="inner">Foo</div><div class="inner">Bar</div>
  </div>
</div>

<div class="context custom_outline" tabindex="0">
  <h1>Wrong outline on Firefox</h1>
  <h2>... but on Chrome is BETTER if I set an explicit outline</h2>
  <div>
    <div class="inner">Foo</div><div class="inner">Bar</div>
  </div>
</div>

默认情况下：

• Firefox 的大纲包含div，包括内部的负边距;这画一个矩形。
• Chrome 的大纲包裹div，包括内部的负边距;这个绘制一个多边形，它偏离负边距。

设置明确的大纲：

• Firefox 的大纲包含div，包括内部的负边距;这画一个矩形。 [没有任何改变。一致的行为，至少]
• Chrome 的大纲包含div， 不 ，考虑到负边距内在的;这个绘制一个忽略负边距的矩形。

为什么这种不一致的行为？是什么引发了Chrome的差异？谁更尊重W3C规范？

我想要实现的结果是Chrome的最后一个案例，大纲包裹div并忽略负边距（仅考虑 border-box ，就像background-origin属性一样）

我怎么能这样做？

Answer 1

规格没有明确定义绘制轮廓的方式，只是它们不会影响布局，并且可能非矩形。触发Chrome差异的原因可能在于它首先如何实现默认大纲 - 您可以看出它看起来像使用纯CSS无法实现。

要获得所需的结果，您可以通过将轮廓添加到焦点上绝对定位的::before伪元素（并禁用元素本身的轮廓）来作弊：

＆＃13;

＆＃13;

.inner {
  margin-left: -20px;
  padding-left: 20px;
}

.context {
  margin-left: 40px;
  background-origin: content-box;
  background-color: limegreen;
}

.custom_outline:focus {
  position: relative;
  outline: 0;
}

.custom_outline:focus::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  outline: 3px solid blue;
  z-index: -1;
}

＆＃13;

<div class="context" tabindex="0">
  <h1>Default outline</h1>
  <div>
    <div class="inner">Foo</div><div class="inner">Bar</div>
  </div>
</div>

<div class="context custom_outline" tabindex="0">
  <h1>Custom outline</h1>
  <div>
    <div class="inner">Foo</div><div class="inner">Bar</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

chrome绘制区域边缘而非聚焦：

您可以将outline重置为none并改为使用box-shadow。

＆＃13;

＆＃13;

.inner {
  margin-left: -20px;
  padding-left: 20px;
}
.context {
  margin-left: 40px;
  background-origin: content-box;
  background-color: limegreen;
}
.custom_outline:focus {
  box-shadow: 0 0 0 3px blue;
  outline: none;
}

＆＃13;

<div class="context custom_outline" tabindex="0">
  <h1>box-shadow outlining Firefox</h1>
  <h2>... but on Chrome reset outline to none too</h2>
  <div>
    <div class="inner">Foo</div>
    <div class="inner">Bar</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

测试chrome的defaut行为：看它绘制可聚焦区域的边缘

＆＃13;

＆＃13;

.inner {
  margin-left: -20px;
  padding-left: 20px;
  pointer-events: none;
}
.context {
  margin-right: 60%;
  margin-left: 40px;
  background-origin: content-box;
  background-color: limegreen;
}
.context:hover {
  outline-color: red;
  /* color  reset , if style is reset, behavior is reset too*/
}
h2:before {
  content: '';
  display: inline-block;
  width: 1em;
  padding: 1em;
  position: relative;
  left: 105%;/* outside the box */
}

＆＃13;

<div class="context" tabindex="0">
  <h1>no outline on Firefox</h1>
  <h2>... but on Chrome ...</h2>
  <div>
    <div class="inner">Foo</div>
    <div class="inner">Bar</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13; 其中FF将包含所有内容：

＆＃13;

＆＃13;

.inner {
  margin-left: -20px;
  padding-left: 20px;
  pointer-events: none;
}
.context {
  margin-right: 60%;
  margin-left: 40px;
  background-origin: content-box;
  background-color: limegreen;
}
.context:focus {
  outline: solid 3px blue;
}
h2:before {
  content: '';
  display: inline-block;
  width: 1em;
  padding: 1em;
  position: relative;
  left: 105%;/* outside the box */
}

＆＃13;

<div class="context" tabindex="0">
  <h1>Wrong outline on Firefox</h1>
  <h2>... but on Chrome is even WORSE</h2>
  <div>
    <div class="inner">Foo</div><div class="inner">Bar</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;