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 ]

Verwandte Etiketten：

firefox

Quelle：php.cn

Vorheriger Artikel：Zusammenfassung der CSS-Wildcard-Nutzung_Experience-Austausch Nächster Artikel：ASP, PHP und Javascript wechseln automatisch den CSS-Skincode entsprechend dem Zeitraum_Erfahrungsaustausch

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

Neueste Artikel des Autors

• Was ist eine NullPointerException und wie behebe ich sie?
  2024-10-22 09:46:29
• Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen
  2024-10-13 13:53:41
• Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger
  2024-10-12 12:15:51
• C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer
  2024-10-11 22:47:31
• Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger
  2024-10-11 19:36:51
• Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger
  2024-10-11 15:50:41
• Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger
  2024-10-11 15:07:41
• PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung
  2024-10-11 14:21:21
• Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen
  2024-10-11 12:59:11
• Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten
  2024-10-11 12:17:31

Aktuelle Ausgaben

Eine Website, die Live Server verwendet, funktioniert nicht, wenn ich sie aus einer Datei starte Ich habe mehrere Browser ausprobiert und in jedem Fall funktioniert die Website mit LiveSe...

Aus 2024-04-06 12:46:18

0

1

403

Nach dem Aufruf von SAPUI5 callFunction() wird der Errorhandler nicht aufgerufen Ich versuche, die IBAN im Assistenten in SAPUI5 zu validieren. Dazu verwende ich functionI...

Aus 2024-04-04 18:06:36

0

1

400

Vertikal gedrehter Tabellentitel, zentriert + unten ausgerichtet, browserübergreifend Ich habe eine Tabelle mit gedrehten Kopfzeilen, die in Chrome wie erwartet aussieht, in Fi...

Aus 2024-04-04 16:45:25

0

1

330

Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...

Aus 2024-04-04 12:53:48

0

1

303

Verwenden Sie JS, um die Wiedergabequalität zu steuern Gibt es eine Möglichkeit, die Wiedergabequalität eines Videos mithilfe von Javascript zu s...

Aus 2024-04-04 00:21:55

0

1

384

verwandte Themen

Mehr>

• Was bedeutet Kol?
• Der Unterschied zwischen xdata und data
• So verwenden Sie den Befehl „find', um Dateien unter Linux zu finden
• Gängige Methoden im Mathematikunterricht
• Die Funktion des Span-Tags
• Wo kann ich das Douyin Little Fire Man-Kostüm bekommen?
• Was ist das World Wide Web?
• So öffnen Sie eine MDF-Datei