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

Question

我的页面中有两个侧边栏（居中和响应）之间有三列。它在除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 （尝试在页面“三列”和“样本页面”之间切换以查看差异）。

我的问题是：如何在不使用令人讨厌的CSS黑客入侵Opera和Safari的情况下，如何将列完美放在所有浏览器中？可以吗？

谢谢堆叠机！

Answer 1

你的容器div＃blogs_three_cols没有居中。添加a 保证金：0自动 到容器并省略 向左飘浮 从它。

Answer 2

如果某人有一个明确的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...
}
}