Verwenden Sie die Anfangsbreite für Elemente, die im IE nicht funktionieren

107

Ich habe ein Grafik-Plugin, das Leinwand und eine Legende <table>in seinen Container einfügt . In diesem Plugin tableist das nicht widthdefiniert und in meinem CSS gibt es eine Breite für Tabellen in diesem Container, in die mein Plugin eingefügt wird.

Das neue div erbt also table{ width: 100%}vom CSS und rendert falsch.

Ich habe versucht zu verwenden width: initial;, sieht auf Chrome gut aus, aber der IE mag es nicht, ^{die Browserkompatibilität zu überprüfen}

Ich gebe zu, ein Inline-CSS im Skript / Plugin zu ändern / zu erzwingen, da es in jeder Umgebung funktionieren muss.

Was ist hier die beste Lösung?

css internet-explorer cross-browser width Rikard
quelle

Haben Sie versucht, nur eine Mindestbreite festzulegen? Funktioniert es?

BuddhistBeast

@BuddhistBeast, habe nicht darüber nachgedacht! Aber habe das jetzt versucht und auch nicht auf Chrome funktioniert.

Rikard

Antworten:

176

Wie Sie sagten, wird im Allgemeinen width: autoeinen ähnlichen Effekt haben. Die Regeln haben:

.my-selector {
    width: auto;
    width: initial;
}

Sollte dazu führen, dass es verwendet wird, initialwenn es unterstützt wird und autoanderweitig.

Mark Rhodes
quelle

Dies hat mein Problem behoben. Vielen Dank.

Dchayka

Ich habe gerade eine Stunde gespart. Vielen Dank.

Skitterm

Als Hinweis initial gilt ein gültiger Eigenschaftswert ( developer.mozilla.org/en-US/docs/Web/CSS/initial ). Aber (wenn Sie im vorherigen Link zu "Browserkompatibilität" scrollen), wird dies von keiner IE-Version unterstützt.

Gtramontina

Dies ist als Fallback bekannt und ein sehr häufiges Codierungsmuster in CSS. auch unter Verwendung width: autonicht nur eine ähnliche Wirkung, aber es wird die hat genau die gleiche Wirkung, da autowird definiert der Anfangswert ist für die widthEigenschaft.

Chharvey

Die Verwendung von width: auto;Inline im Skript löst das Problem in Chrome, FIrefox und IE 11. Nur nicht sicher, ob es einen besseren Weg gibt.

Rikard
quelle