Google Chrome 浏览器中用于 CSS 样式修改的 Javascript

Question

我在开发尽可能与大多数流行浏览器兼容的 Web 应用程序时遇到了一个奇怪的问题:

我有一个 HTML，我想通过单击按钮将其从页面内的原始位置移动到另一个位置。

这是 HTML 代码:

<div id="content"> text content ... </div>

关联的 CSS :

div#content{ padding: 15px 15px 15px 215px; }

以及点击按钮时移动 block 的 javascipt :

document.getElementById('content').style.padding="15px 15px 15px 15px";

=> 它在 Firefox、IE 和 Opera 中运行良好(基本上，它将原本占页面一半的内容 block 扩展到整个页面)

=> 而在 Chrome 中，javascript 代码不会扩展 block 宽度，而是将其移动 200px 固定宽度(但如果我一次硬编码填充修改，它工作正常......)

我希望足够清楚 :s 如果有人有解决方案.. 提前致谢。

Answer 1

如果你将 padding 换成 margin，它在 Firefox 和 Chrome 中的效果是一样的(无论如何在我的电脑上):

div#content{
    padding: 0;
    margin: 15px 15px 15px 15px;
    background: #fff;
}

然后:

function hideSideBar(){
    document.getElementById('content' ).style.margin="15px 15px 15px 15px";
    document.getElementById('out' ).style.display="none";
    document.getElementById('in' ).style.display="block";
}

function showSideBar(){
    document.getElementById('content').style.margin="15px 15px 15px 215px";
    document.getElementById('out' ).style.display="block";
    document.getElementById('in' ).style.display="none";
}

您可能需要修改其他一些样式以使其看起来相同。

我认为 Chrome 正在做的事情是合理的(并不是说我已经审查了规范来检查)，增加填充自然应该使 block 变宽。