użyj szerokości początkowej dla elementu niedziałającego w IE

107

Mam wtyczkę do wykresów, która wstawia płótno i legendę <table>do swojego pojemnika. W tej wtyczce tablenie ma widthzdefiniowanej wtyczki, aw moim CSS jest szerokość dla tabel wewnątrz tego kontenera, w którym moja wtyczka jest wstawiana.

Tak więc nowy div dziedziczy table{ width: 100%}po CSS i źle się renderuje.

Próbowałem użyć width: initial;, wygląda dobrze na Chrome, ale IE nie lubi tego sprawdzać kompatybilność przeglądarki

Przyznaję, że zmieniam / wymuszam wbudowany CSS w skrypcie / wtyczce, ponieważ musi on działać w każdym środowisku.

Jakie jest tutaj najlepsze rozwiązanie?

css internet-explorer cross-browser width Rikard
źródło
Czy próbowałeś tylko ustawić minimalną szerokość? Czy to działa?
BuddhistBeast
@BuddhistBeast, nie pomyślałem o tym! Ale wypróbowałem to teraz i nie działało też w Chrome.
Rikard

Odpowiedzi:

177

Jak powiedziałeś, generalnie width: autobędzie miał podobny efekt. Mając zasady:

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

Powinien spowodować, że będzie używany, initialjeśli jest obsługiwany lub w autoinny sposób.

Mark Rhodes
źródło
3
To rozwiązało mój problem. Dzięki.
dchayka
2
Uratował mi tylko godzinę. Dzięki.
Skitterm
2
Uwaga: initial to prawidłowa wartość właściwości ( developer.mozilla.org/en-US/docs/Web/CSS/initial ). Ale (jeśli przewiniesz w dół do „Zgodności przeglądarek” w poprzednim linku), żadna wersja IE tego nie obsługuje.
gtramontina
4
jest to znane jako rozwiązanie awaryjne i jest bardzo popularnym wzorcem kodowania w CSS. również, używając width: autonie tylko będą mieć podobny efekt, ale będzie miał dokładnie taki sam efekt, ponieważ autojest zdefiniowana jako wartość początkowa dla widthnieruchomości.
chharvey
6

Używanie width: auto;inline wewnątrz skryptu rozwiązuje problem w Chrome, FIrefox i IE 11. Tylko nie jestem pewien, czy istnieje lepszy sposób.

Rikard
źródło