Seltsames Phänomen der Stileinstellungsbreite unter Firefox_Experience-Austausch

Auf der Seite befindet sich eine Datenliste, bei der es sich um eine Tabelle handelt. Sie wird in einem Div-Fenster mit der folgenden Struktur platziert:

Code kopieren Der Code lautet wie folgt:

... .Listendaten....< /table>

Setzt den Stil auf Container %; margin:10px;}
Legen Sie den Stil für das Raster fest #grid {width:100%}

Die Testergebnisse sind im IE normal, die tatsächliche Breite des Containers wird 100 % überschreiten. und eine horizontale Bildlaufleiste wird angezeigt, da Firefox den Rand zählt. Geben Sie die Breite ein, die tatsächlich 100 % + 20 Pixel> 100 % entspricht.
Natürlich können Sie die Randdefinition des Div entfernen und stattdessen die Auffüllung des Körpers verwenden. Es gibt jedoch andere Inhalte auf der Seite, die die gesamte Seite einnehmen müssen.
Um dieses Problem zu lösen, wurden in Firefox divs mit einer Breite von 98 % definiert. Dies schien das Problem zu lösen, aber wenn das Browserfenster kleiner wurde, könnte es unter Firefox 98 % + 20 Pixel sein größer als 100 % und eine horizontale Bildlaufleiste erscheint.

Um es auszuprobieren, habe ich den Containerstil in #container {width:100%-20; margin:10px} geändert und bin dann zu Firefox gegangen, um einen Blick darauf zu werfen normal, es ist das gleiche wie unter IE, es ist wirklich seltsam, die Definition von width: 100%-20 sollte falsch sein! Aber es löste das Problem von Firefox einschließlich Marge. Ich habe es weiter versucht und festgestellt, dass es um jede beliebige Zahl von 100 % reduziert werden kann. Nachdem ich einige Informationen überprüft hatte, verstand ich den Grund immer noch nicht.
Vielleicht ist es nur ein Bug, haha! Vielleicht kennt ein Experte den Grund. Ich habe es selbst getestet und den Code und die Screenshots gepostet:

Testen<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <div style="width:200px; overflow-y:auto; background:#efefef; border:2px solid #FF0000"> <div style="width:100%-20; margin:8px" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> <table style="width:100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#333333"> <tr> <td bgcolor="#FFFFFF">数据1</td> <td bgcolor="#FFFFFF">数据2</td> <td bgcolor="#FFFFFF">数据3</td> <td bgcolor="#FFFFFF">数据4</td> </tr> <tr> <td bgcolor="#FFFFFF">数据5</td> <td bgcolor="#FFFFFF">数据6</td> <td bgcolor="#FFFFFF">数据7</td> <td bgcolor="#FFFFFF">数据8</td> </tr> </table> </div> </div>
[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn