Problem z szerokościami opartymi na procentach w Opera

Question

Próbuję utworzyć układ płynnej siatki i wystąpił problem z niespójnym renderowaniem szerokości w Operze. W Operze szerokość elementów jest konsekwentnie mniejsza niż w innych przeglądarkach. Próbuję płynnego systemu siatki 960, ale jeśli to nie będzie zgodne, to mogę zmienić na stałe rozmiary.

Czy ktoś wie, w jaki sposób mogę przekonwertować Operę na szerokość tak, jak inne przeglądarki?

Oto CSS i HTML używam do tego demo

.show_grid { 
    background: url(../img/grid.gif) no-repeat center top; 
} 

html, body{ 
    margin: 0; 
    padding: 0; 
} 
.container { 
    width: 92%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 936px; 
    padding-top: 15%; 
} 
.box { 
    width: 15.633%; 
    background: #006; 
    color: #999; 
    margin: 5% .55% 
} 


<div class="container show_grid"> 
    <div class="box">2 column - browser name</div> 
</div> 

Answer 1

Opera zaokrągla procent widths ale nie okrągłe wartości procentowe dla uszczelek i marże.

W ten prosty sposób można ustawić width: 15% i dodać padding-right:.633%. Ale tak, tylko blok byłby większy wizualnie.

Jeśli chcesz mieć szerokość równą szerokości, aby wszystkie dzieci miały tę samą szerokość, musisz dodać kolejną owijkę i dodać do niej odpowiedni margines ujemny. Jest obliczana według następującego wzoru: 100/width*padding, w twoim przypadku: 100/15*0.633. Zrekompensowałoby dopełnienie i wszystko byłoby fajne.

Oto skrzypce ze wszystkimi wariantami: http://jsfiddle.net/kizu/8q23d/ - stała szerokość w pikselach, blok z width:15.633%, pierwsza poprawka wizualna i poprawna poprawka na końcu.

Answer 2

---

czynienia z różnymi modelami box może być bardzo trudne i czasochłonne. Zdecydowanie sugeruję, aby unikać brudnych haków CSS, które nie sprawdzą poprawności plików css.

Możesz spróbować zrzucić wykorzystanie wartości procentowych i przejść do "elastycznego" układu. W tym przypadku należy określić min-width i max-width dla elementów bloku. Artykuł o elastycznego układu jest here i coś więcej here

W alternatywnych można wykryć poprzez przeglądarkę javascript lub poprzez biblioteki i korzystać z warunkowego pliki CSS. To jest moje ulubione podejście podczas pracy z IE.

conditional css to biblioteka, która Ci w tym pomoże, ale jest jeszcze wiele innych opcji w sieci.

Powodzenia