如何在Opera和Safari中完美地居中三列？

我在我的頁面中有兩個側邊欄（居中和響應）之間的三列。除Opera和Safari之外，所有瀏覽器都很好看。 這兩個瀏覽器都集中在而不是。如何在Opera和Safari中完美地居中三列？

它看起來像這樣在Firefox，Chrome和IE：

http://www.vasinternetposao.com/center_problem/center.png

這是它的外觀在Opera和Safari：

http://www.vasinternetposao.com/center_problem/not_centered_opera.png

這是我的CSS：

#blogs_three_cols .left_column { 
width: 32.7%; 
} 

#blogs_three_cols .middle_column { 
margin-left: 0.95%; 
width: 32.7%; 
margin-right: 0.95%; 
} 

#blogs_three_cols .right_column { 
margin:0; 
width: 32.7%;  
}

這裏是Live Page（嘗試切換頁面「三列」和「示例頁面」以查看區別）。

我的問題是：如何在所有瀏覽器中將我的列完美集中，而無需在Opera和Safari中使用令人討厭的CSS黑客？可以做到嗎？

謝謝堆垛機！

來源

2014-02-12 Dejo Dekic

你的div容器＃blogs_three_cols不centered.add一個保證金：0汽車到容器中，省略浮動：從上次。

來源

2014-02-12 12:02:23 codeWorm

試過您的解決方案.. 。（ –

）不同的瀏覽器在呈現html和css時有細微的差別，其中一些問題可以通過真正使用html和css設計規則來解決，有些甚至在這種情況下通過真正使用規則也無法解決你可以在頁面加載時使用jquery更改css類。 – codeWorm

是的，我知道，我也知道我可以通過使用瀏覽器特定的Opera和Safari黑客來「修復」，但我不想那樣做。 –

如果有人有一個明確的CSS溶液或更好的Jquery/JavaScript的爲了這個，我想聽到它：=）無論如何，我會改變基於瀏覽器檢測這樣的類：

j(document).ready(function() { 
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; 
//Opera check and safari... 
if (window.opera && window.opera.buildNumber || isSafari) { 
//add some classes for Opera and Safari browsers... 
} 
}

來源

2014-02-12 13:08:59

如何在Opera和Safari中完美地居中三列？

回答

相關問題