ie8 - 当图像只有最大宽度时，将文本宽度限制为图像宽度

Posted 2023-02-25

【中文标题】ie8 - 当图像只有最大宽度时，将文本宽度限制为图像宽度

【英文标题】：ie8 - limiting text width to image width when the image has only max-width

【发布时间】：2012-02-13 10:13:50

【问题描述】：

我有一个带有文本的页面，以及一个带有图像的 div 和关于右侧图像的简短文本。

我只想设置图像的最大宽度（而不是宽度），并且我希望图像的文本被限制为图像的宽度。 我在这里使用了一个答案：Limit text to the width of sibling image / auto width in CSS - 并设置了正确的 div：display:table 和 width:1px。 但是现在我在 ie8 中遇到了问题，因为 ie8 在这里描述了一个 bug：http://bytes.com/topic/html-css/answers/870359-ie8-display-table-cell-max-width-bug - 当孩子的最大宽度小于固有宽度时，它会给元素错误的宽度。

在上面的链接中有一个解决方案 - 设置 table-layout:fixed，但这会导致我的 div 宽度为 1px。

有人有解决办法吗？

谢谢！

PS 我有图片可以说明问题，但我是新用户，所以我不能发布它们......

【问题讨论】：

你能做一个jsFiddle问题的演示吗？

@thirtydot - 是的。这里：jsfiddle.net/ftUcF - 有一个小于最大宽度的图像，一切都很好，这里：jsfiddle.net/VCCcK - 有一个大于最大宽度的图像，在 ie8 中看起来不太好.谢谢。

我找不到解决这个问题的方法:(

【参考方案1】：

您可以将 CSS letter-spacing 属性与 font-size 结合使用以供初学者使用...

you_selector letter-spacing: 2px;

看看这里的jsFiddle代码是你应该做的改变......

添加这个 CSS...

.ImageTextPanel float: none;
.ImageTextPanel span letter-spacing: 0px;

将所有文本保留在段落和跨度元素内。虽然将文本直接放入除法元素在技术上是有效的，但这种做法非常糟糕。

<DIV class="ImageTextPanel"><span>Text about the image, may be multiple lines.</span></DIV>

HTML 也不要使用大写字母，这很垃圾。如果你真的想精益求精，学习编写作为 application/xhtml+xml 的 XHTML（你也可以使用 XHTML5），因为它更严格的规则使调试器更容易，你最终会更快地抛出基本的东西。

【讨论】：

嗨@John。首先，感谢您的建议。您是否尝试过您的建议并且它在 IE8 中对您有用？ （对于大图）因为我添加了 css 和 span - 并得到了同样的错误。 :( 这里是 jsFiddle 的变化，我哪里出错了？jsfiddle.net/MEb6n/3

image 和 span 元素都应该在它们自己的划分元素中，这两个各自的划分元素应该在一个祖父划分元素的内部，你有 DescriptionImgDIV。问题是您没有强制执行实际宽度，只有最大宽度。您可以尝试 word-wrap 属性（只有 CSS3 IE8 实际支持）或 CSS2 white-space 或属性，但是在做了一些摆弄之后，我只是看不到您使用 max-width 得到想要的东西。文字的宽度和图片的最大宽度太主观了。

嗨@John，再次感谢您，但是自动换行和空白并没有解决我的问题。所以你认为我必须使用 JS 才能使其在 ie8 中工作？ :( 为什么它可以在 Firefox、Chrome 和 Safari 中完美运行？

查看jsfiddle.net/MEb6n/3 我发现它在 IE8 的 IE8/标准模式下呈现不同。我没有 IE9 的副本，尽管 VirtualBox 中的 IE10 preview 4（尽管分辨率较小）似乎可以按需要呈现。您可以使用 IECCSS（查找它，您会看到我的教程）为 IE8 调整 CSS，但坦率地说，我不确定您可以预先做些什么。这绝对看起来像是一种不一致的行为。