DOM 更改时 CSS 适合内容答案

【问题标题】：CSS Fit to Content When DOM ChangesDOM 更改时 CSS 适合内容
【发布时间】：2013-05-11 09:51:50
【问题描述】：

编辑：对不起，这已经解决了检查内联样式的评论已经解决了这个问题。问题实际上不在css中，而是在javascript中。有时，当你编码太久时，你往往会错过这些东西。不过还是谢谢你的帮助

我的 CSS 有问题。当我在 Firefox 中禁用缓存时，绝对定位的容器 div 的宽度不会拉伸以适合子 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 的内容发生变化时，如何实现父宽度自动更新？例如当图像已完全加载/

【问题讨论】：

您的内联样式属性包含冲突的引号。 style="...url(".."); ...".
代码直接取自 firebug，因为它也是用 js 动态生成的。但我看到宽度：0px；在那里，但我不认为它是由 js 生成的（几乎可以肯定）。
哦，等一下，谢谢！ js是问题所在。它在图像尚未完全加载时执行，将宽度显式设置为0；

标签： html css dom

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

也许使用 jQuery...Image 已在文档就绪事件中完全加载。所以附加一个适当的函数来更新父母到那个事件应该可以做到。现在父更新（重新渲染）是一个棘手的部分，但我认为添加一个随机类并删除它应该可以做到......代码是：

$.ready({ //event
var parent = $('#someparent'); //parent
parent.addClass('someclass'); // to trigger rerender
parent.removeClass('someclass'); // to trigger rerender
});

【讨论】：