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?

— 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

To rozwiązało mój problem. Dzięki.

— dchayka

Uratował mi tylko godzinę. Dzięki.

— Skitterm

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

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

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