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

开发一个与大多数流行的浏览器尽可能兼容的Web应用程序时，我面临一个奇怪的问题：

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

这是HTML代码：

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

关联的CSS：

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

和javascipt在单击按钮时移动块：

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

=>可以在Firefox，IE和Opera中正常运行（基本上，它可以将最初占页面一半的内容块扩展到整个页面）

=>而在Chrome中，javascript代码不会扩展块的宽度，而是以固定的宽度将其移动200px（但是如果我一次对填充修改进行硬编码，它就可以正常工作...）

我希望足够清楚：如果有人有解决办法..
提前致谢。

最佳答案

如果您将填充替换为边距，则它在Firefox和Chrome（无论如何在我的PC上）中都相同：

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所做的事情是合理的（不是我已经查看过要检查的规格），增加填充量自然应该使代码块更宽。

关于javascript - Google Chrome浏览器中用于CSS样式修改的Javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1583065/