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

Question

我有一个包含文本的页面，以及一个包含图像的 div 以及右侧图像的简短文本。

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

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

有没有人有解决办法？

谢谢!

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

Answer 1

对于初学者，您可以将 CSS 字母间距属性与字体大小结合使用...

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 中使用大写字母，那是垃圾。如果您真的想出类拔萃，请学习编写 XHTML 作为 application/xhtml+xml 的程序(您也可以使用 XHTML5)，因为它更严格的规则使调试器更容易，并且您最终会更快地抛出基本的东西。