基於百分比的寬度在Opera中的問題

我正在嘗試製作流暢的網格佈局，並且遇到了Opera中寬度呈現不一致的問題。在Opera中，元素的寬度始終小於其他瀏覽器。我正在嘗試流體960網格系統，但如果它不一致，那麼我可能會更改爲固定大小。基於百分比的寬度在Opera中的問題

有誰知道我怎麼可以得到歌劇呈現與其他瀏覽器相同的寬度？

example of Opera browser not render something the percentage width it should be

這裏是CSS和HTML我使用這個演示

.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>

來源

2011-08-17 Paul Sheldrake

歌劇輪％的widths但它不是圓的百分比值，填充和利潤率。

所以，簡單的方法是設置width: 15%，並添加padding-right:.633%。但是這樣做，只有塊才能在視覺上更大。

如果你想讓它的寬度一致，所以所有的孩子會有相同的寬度，你需要添加另一個包裝並添加適當的負邊距。它是通過這個公式計算的：100/width*padding，在你的情況下：100/15*0.633。它會補償填充，一切都會很酷。

這裏是與所有的變體小提琴：http://jsfiddle.net/kizu/8q23d/ - 以像素爲單位固定的寬度，與width:15.633%塊，第一視覺修復和在端部的正確定位。

來源

2011-08-17 10:59:54 kizu

謝謝你的回答。恥辱，它必須通過添加更多的標記來解決。 – 2011-08-18 11:10:59

不同箱的型號處理可能會非常棘手且費時。我絕對建議你避免不會驗證你的css文件的骯髒的CSS黑客。

您可以嘗試放棄百分比值的使用並進行「彈性」佈局。在這種情況下，您可以爲塊元素指定最小寬度和最大寬度。的約彈性佈局文章是here和更多的東西here

在可替代的，你可以通過JavaScript或通過庫檢測瀏覽器和使用條件CSS文件。這是我在處理IE時最喜歡的方法。

conditional css是一個圖書館，可以幫助你，但網絡上還有很多選項。

好運

來源

2011-08-17 10:34:19 Rdpi

感謝您的回答，我以前沒有見過這個條件的CSS庫。 – 2011-08-18 10:33:39

基於百分比的寬度在Opera中的問題

回答

相關問題