IE6 中的 jQuery Center Div 切换答案

【问题标题】：jQuery Center Div toggle in IE6IE6 中的 jQuery Center Div 切换
【发布时间】：2011-08-26 22:33:12
【问题描述】：

单击按钮使 div 居中，再次单击左对齐。这适用于除 IE6 之外的所有浏览器。 IE6 不支持margin:0 auto; 我该如何解决这个问题。 div 宽度是动态的，并不总是 200 像素。

检查 jsfiddle http://jsfiddle.net/hZ23J/1/

<button id="center">Left Align</button>
<div></div>

$('#center').toggle(function() {
    $('div').css('margin', '0');
    $(this).text('Center Align')
}, function() {
    $('div').css('margin', '0 auto');
    $(this).text('Left Align')
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

IE6 使用

body{
text-align:center;
}

你的 jQuery 代码看起来像

$('#center').toggle(function() {
    $('div').css('margin', '0');
    $('body').css('text-align', 'left');
    $(this).text('Center Align')
}, function() {
    $('div').css('margin', '0 auto');
    $('body').css('text-align', 'center');
    $(this).text('Left Align')
});

在http://jsfiddle.net/jNWYP/1/查看工作示例

【讨论】：

【解决方案2】：

此解决方案在 IE6 中适用于我...

$('#center').click(function () {
    $('div').toggleClass('center');
});

类...

.center { margin: 0px auto; }

尽可能将 JS 和 CSS 分开也是一种很好的做法。

这是我的文档类型...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【讨论】：

@Pinkie 这是我在 IE6 测试中使用的确切代码：jsfiddle.net/sS975
@Pinkie 我没有使用怪癖模式。尝试使用我发布的文档类型。