是否有一个解决方法的子像素边框与铬61的全尺寸内部div？

Question

编辑：已经确认这是61中的一个错误，他们会在62稳定之前修复https://bugs.chromium.org/p/chromium/issues/detail?id=763402

使用最新的chrome更新，我看到我的一些子像素边框在两边都丢失了。它们的哪一方是不一致的。我已将问题归结为此

<pre>
legend:
    pink: 1px border inner uses 100px//no problem
    salmon: .5px border inner uses 99% //no problem
    orange: .5px border inner uses 99px //no problem
    blue: .5px border inner uses 100% //missing borders consistant sides
    green: .5px border inner uses 100px //missing borders consistant sides
</pre>

<div style="border:solid 1px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightpink"> </div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:99%; height:99%; background:salmon"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:99px; height:99px; background:orange"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100%; height:100%; background:lightblue"></div>
</div>


<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightgreen"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightgreen"></div>
</div>

<br />

<div style="border:solid .5px black; width:100px; height:100px;">
    <div style="width:100px; height:100px; background:lightgreen"></div>
</div>

jsfiddle https://jsfiddle.net/arrowplum/qmvx8obn/

有没有人知道我可能做错了什么？如果没有，是否有解决方法？

请注意，这些示例适用于Chrome 60，safari和firefox

如果你是小提琴过敏，这是一个截图：

编辑：@ brian17han添加了一个适用于chrome的解决方法，但后来破坏了safari和firefox https://jsfiddle.net/arrowplum/qt0m7f2p/

EDIT2：将填充修改为.1px然后适用于safari，chrome和firefox，但视网膜显示器上的firefox除外，它显示内部和外部之间的半像素空间。

Answer 1

Chrome 61的行为与旧版本不同的原因我不清楚。

但是，这是一个快速的解决方案。您可以将padding添加到容器中，并将padding设置为与border-width相同的大小。 如果您希望容器的width和height为100px 并带有边框，则需要将容器设置为{{1 }}。否则，您的容器大小将为box-sizing: border-box; + 100px。

已编辑：我添加了另一个使用border-width来模拟边框的解决方案。

＆＃13;

＆＃13;

box-shadow: inset

＆＃13;

div.padding-container {
  border: solid .5px black;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  padding: .5px;
}

div.padding-container div.inner {
  width: 100%;
  height: 100%;
  background: lightblue;
}

div.with-inner-border {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: lightyellow;
  
  padding: 1px;
  -webkit-box-shadow: inset 0px 0px 0px 1px black;
  -moz-box-shadow: inset 0px 0px 0px 1px black;
  box-shadow: inset 0px 0px 0px 1px black;
}

＆＃13;

＆＃13;

＆＃13;