Warum wird die Umrissbreite ignoriert?

Question

Ich habe festgestellt, dass, wenn ich outline-style: auto in meinem CSS dann die Gliederung ist immer 2px breit, unabhängig von outline-width, es sei denn outline-width ist 0, dann gibt es keine Gliederung.

Warum Browser ignorieren outline-width in diesem Fall und wie kann ich die Breite ändern? (Ich weiß, ich kann outline-style: solid verwenden, aber es gibt nicht den gleichen Effekt).

div { 
 
    background-color: #CCC; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    outline-color: dodgerblue; 
 
    outline-style: auto; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div style="outline-width: 0px">0px</div> 
 
<div style="outline-width: 1px">1px</div> 
 
<div style="outline-width: 10px">10px</div> 
 
<div style="outline-width: 1em">1em</div>

Answer 1

Wenn Sie zum Beispiel verwendet outline-style: solid; es

nicht die Breite Satz bestätigen arbeiten, wenn Stil auto als bug in Chrome gemeldet wird, Rand-/IE11 macht es nicht es sei denn, ein Stil gesetzt, andere als auto und Firefox machen auto als solid

W3C

sagen: (https://www.w3.org/TR/css-ui-3/#outline-style)

Der auto Wert erlaubt es den User-Agenten einen benutzerdefinierten outline Stil zu machen, in der Regel einen Stil, die für die Plattform entweder eine Benutzerschnittstelle Standard ist, oder vielleicht ein Stil, ist reicher als beschrieben werden kann im Detail in CSS, z eine abgerundete Kantenkontur mit halbdurchsichtigen äußeren Pixeln, die zu leuchten scheinen. Als solche hat diese Spezifikation definiert nicht, wie die outline-color eingebaut oder verwendet wird (wenn überhaupt) beim Rendern von Auto Stil skizziert. Benutzeragenten können auto als solid behandeln.

div { 
 
    background-color: #CCC; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    outline-color: red; 
 
    outline-style: solid; 
 
}

<div style="outline-width: 0px">0px</div> 
 
<div style="outline-width: 1px">1px</div> 
 
<div style="outline-width: 10px">10px</div> 
 
<div style="outline-width: 1em">1em</div>

Answer 2

Wenn outline-style ist auto, Browser zeichnen kundenspezifische, plattformspezifische Konturen. Dies kann dazu führen, dass sie einige oder alle anderen Umrisseigenschaften ignorieren, wenn sie nicht von ihren benutzerdefinierten Umrissimplementierungen unterstützt werden. Dies bedeutet, dass Sie die Breite des Umrisses möglicherweise nicht anpassen können.

Interessanterweise ist die spec nur erwähnt Browser outline-color zu ignorieren frei ist, auch wenn es keinen Sinn macht, sie zu zwingen, beliebige Nicht-Null-Werte von outline-width zu ehren, wenn plattformspezifische Konturen zeichnen, die nicht einmal willkürliche Breiten unterstützen könnten an erster Stelle (wie es am ehesten bei jedem Browser der Fall ist).

Beachten Sie, dass Firefox outline-style: auto als outline-style: solid behandelt (die in der Spezifikation erwähnt wird, auch), was bedeutet, es wird machen Umrisse mit der Breite, die Sie angeben. IE und Microsoft Edge scheinen outline-style: auto überhaupt nicht zu unterstützen, was all das für diese Browser irrelevant macht (ich hätte zumindest erwartet, dass Microsoft Edge es als solide behandelt, da Windows 10 wie immer standardmäßig Fokusstile zeichnet, aber Ich schweife ab).