Zewnętrzna div ma szerokość procentową, a wewnętrzna div ma display: tabel; width: 100%.wyświetlacz: tabela div z procentową szerokością 1px błąd
Wewnętrzne przedstawienie div pokazuje 1px mniej niż zewnętrzny div dla niektórych szerokości strony podczas zmiany rozmiaru. Spowoduje to dodanie linii 1px w prawo.
https://jsfiddle.net/afelixj/utcswLp1/1/
Czy jest jakaś poprawka do błędu?
Wydaje się, że szczególne błędów WebKit: https://bugs.webkit.org/show_bug.cgi?id=140371
Szerokość elementu display:table-* nie zawsze właściwie obliczony, jeżeli znajduje się z rodziców, który nie jest zdefiniowany width bezwzględną urządzenia. widać ten problem w akcji tutaj: Spójrz na prawej stronie czerwonymi elementami
można rozwiązać ten problem na 2 różne sposoby
display: table do elementu kontenera. To naprawdę nie rozwiązuje błędu, ale nie powinno już być zauważalne (ponieważ wpłynie to również na element nadrzędny).Zmień swoje display:table na display:block.
Poszukuję rozwiązania tego błędu. –
Twój problem wynika z szerokości "60%" kontenera.
Chrome obcina miejsca dziesiętne (300.5px stanie się 300px).
Dlatego też, kiedy wewnętrzna div ustawiony jest na „100%” jest obliczana na zaokrąglonych szerokości rodzica div
Zatem załóżmy, że zewnętrzna div 300.5px (60% całości).
Wewnętrzny element div jest wyliczany jako 100% wartości 300 pikseli;
Dlaczego dzieje się tylko dla 'display: table', a nie dla' display: block'? –
Ponieważ 'display: block' zajmie całą przestrzeń. Nie ma znaczenia, czym jest "szerokość". Dlatego nie jest obliczany. I dlatego nie zaokrąglone. –
Wiem, że jest dość późno, ale tutaj jest poprawka dla tego błędu, z którym miałem do czynienia.
Jak wspomniano w tym wątku, problem polega na zastosowaniu wartości procentowej jako jednostki szerokości. Przeglądarka zaokrągla liczbę dziesiętną do pełnej liczby. Wszystko, co musimy zrobić, to dodać 1 piksel do wartości procentowej opartej na. Możemy to zrobić za pomocą calc:
width: calc(100% + 1px);
Będzie to działać we wszystkich popularnych przeglądarkach, z wyjątkiem IE 11 i starszych.
.wrap{
background: #000;
height: 400px;
width: 60%;
display:inline-table;}
Wystarczy zmienić swój kod css jak to
Mam sprawdzanie w chromowaną najnowszej wersji. Dzieje się tak tylko w przypadku niektórych szerokości przeglądarki. –
To samo pytanie zostało zadane wiele razy i można znaleźć odpowiedź, jeśli po prostu google. Zobacz ten wątek: http://stackoverflow.com/questions/26204771/css-display-table-width-100-missing-pixel – Kamelkent