100% szerokość jest większa niż div rodzica

Pracuję nad motywem vBulletin, ale na liście wątków każdy wątek ma 100% szerokości, ale wątki są również większe niż ich rodzice, ale gdy usuwam obwiednię wątków, pasuje do div rodziców :). więc pomyśl, że ten problem dotyczy granic.100% szerokość jest większa niż div rodzica

Widać, że lepiej na jsfiddle (gwint jest biały kształt z czarnym obramowaniem)

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

Źródło

2013-08-03 AmirHosein KazemNejad

Problemem jest to, że width jest wielkość wewnętrznej powierzchni z tekstem, a wyściółka z granicy są "owinięte" wokół niego. Ta specyfikacja nie ma sensu, ale za nią podąża większość nowoczesnych przeglądarek.

Twój wybawca nazywa się box-sizing: border-box;.

.threadbit .thread { 

    /* ... some stuff ... */ 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

Spójrz tutaj: jsFiddle

Więcej informacji na temat tej nieruchomości here i here.

Źródło

2013-08-03 09:31:00 MightyPork

Tak, masz rację, granice wypychają "szerokość" elementu. Jest to domyślna wersja najnowszych przeglądarek w wersji box-sizing. To może być modyfikowany w większości z oświadczeniem, takich jak:

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

pamiętać, że nie jest obsługiwany pod IE8 więc w zależności od tego, co robisz, a wsparcie chcesz, może trzeba znaleźć alternatywne rozwiązanie lub projektu.

EDIT

Minęło trochę czasu odkąd mój oryginalny odpowiedź i przeglądarka wsparcie zmieniła się nieznacznie. Firefox 29, Chrome 10, Safari 5.1 i Internet Explorer 8 wszystkie obsługują nieobsługiwane box-sizing, ale jest kilka znanych problemów z poszczególnych wersji.

Pełne/up-to-date lista dostępna jest na caniuse.com jednak tutaj jest kilka z nich znalazłem ważne ze strony:

IE8: ignoruje box-sizing: border-box jeśli jest stosowany min/max szerokość/wysokość
IE8: własność min-width dotyczy content-boxbox-sizing nawet jeśli jest ustawiony na border-box
IE9: szerokość paska przewijania jest odejmowana od szerokości elementu, gdy ustawiono position: absolute i albo overflow: auto lub overflow-y: scroll

Jako że udział w rynku dla IE8 i IE9 zmniejsza się, te problemy i inne wymienione na liście będą mniej problematyczne w przyszłości.

Źródło

2013-08-03 09:31:12 Turnerj

Ctrl + C mistrza, ale nie do stylizacji textarea: p @ poprzez http://css-tricks.com/box-sizing/ – MightyPork

Oczywiście! Nie jestem wielkim fanem zamieszczania linku do skrzypiec, a następnie edytowania mojej odpowiedzi kilka razy. ;) Musi być jakimś elementem praktyki i uczenia się dla osoby zadającej pytanie. – Turnerj

O tak, ale z pewnością nie zaszkodzi zastąpić "textarea" przez '.threadbit .thread' w kopiowanym fragmencie kodu? – MightyPork

Zawsze należy pamiętać, gdy napotkasz problemy związane z wymiarami szerokości elementu poprzez model skrzynki z narzędzia dewelopera firefox lub z metrix box chrome. Jego sprecyzowane to dobry pomysł, aby to

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

Upewnij się także, by sprawdzić właściwości wyświetlacza.Jeśli element zostanie wyświetlony w linii, nie będzie przyjmował szerokości, marginesu, a marginesy będą wyświetlane jako blok wstawiany, a margines &.

Tu jest link do skrzynkowej wielkości nieruchomość http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Źródło

2013-08-03 09:56:57

100% szerokość jest większa niż div rodzica

Odpowiedz

Powiązane problemy