html - DOM 更改时 CSS 适合内容

Question

编辑:对不起，伙计们，这已经解决了检查内联样式的评论已经解决了这个问题。问题实际上不在 css 中，而在 javascript 中。有时，当你编码时间过长时，你往往会错过这些东西。尽管如此，还是感谢您的帮助

我的 CSS 有问题。当我在 firefox 中禁用缓存时，绝对定位容器 div 的宽度不会拉伸(stretch)以适合子 div。当我重新加载页面(图像已缓存在浏览器中)时，它会正确执行。居中由 javascript 完成(效果很好，但当图像被缓存时它不会居中，因为父级的宽度(lbCenter)=0)。

<div id="lbOverlay" style="background: url("blue.png") repeat scroll 0% 0% transparent; opacity: 0.25;"></div>
<div id="lbCenter" style="display: block; padding: 0px; left: 675px; top: 305px; width: 0px; height: 0px; margin-left: 0px;">
<div class="lbcb"></div>
<div id="lbWrap">
<img src="http://www.emohaircuts.org/wp-content/uploads/2010/08/emo-boy-fashion.jpg">
</div>
</div>

CSS:

#lbOverlay {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;    
    height: 100%;
}
#lbCenter {
    overflow:visible;
    display:block;
    text-align:center;
    position: absolute;
/*  padding: 20px;*/
    z-index: 110111111;
    outline: none;
}
/**------*/
#lbCenter{
color:green;
border: 10px solid #CCCCCC;
}

如何实现当 lbWrap 的内容改变时，父宽度自动更新？例如当图像已经完全加载/

Answer 1

我相信，如果您指定宽度和高度，那么您的问题可能会得到解决。即使不是这样，包含这些值始终是一个好习惯，因为浏览器会知道它应该为图像保留多少空间(这就是我认为它可以提供帮助的原因)。此外，最好包含 alt 属性(用于搜索引擎或图片无法显示的情况)

<img src="http://www.emohaircuts.org/wp-content/uploads/2010/08/emo-boy-fashion.jpg" height="351" width="263" alt="Emo boy">