0

[确认：IE9 也有同样的错误！:'( ]

我有一个类似于相框样式的 div，其中包含一个 img 和两个 div。这个外部 div 的最大宽度 (80%) 效果很好。

问题是，如果我设置了最大高度，我会得到以下行为：

  • 80px - 按预期工作。
  • 80em - 按预期工作。
  • 80% - 与 height:auto 相同，没有最大高度。

有什么建议吗？Doc-type is <!doctype html>，这是完全有效的，并且通常可以完美运行。我什<meta http-equiv="X-UA-Compatible" content="IE=9">至因为沮丧而补充道。

编辑：

这是我认为相关的 html/css：

<!doctype>
<html>
<头部>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1，h2，h3，h4，h5，h6，p，blockquote，pre，
a，缩写，首字母缩写词，地址，大，引用，代码，
del，dfn，em，img，ins，kbd，q，s，samp，
小，罢工，强，子，sup，tt，var，
b, 你, 我, 中心,
dl, dt, dd, ol, ul, li,
字段集、表单、标签、图例、
表，标题，tbody，tfoot，thead，tr，th，td，
文章，放在一边，画布，细节，嵌入，
图, figcaption, 页脚, 页眉, hgroup,
菜单、导航、输出、红宝石、部分、摘要、
时间、标记、音频、视频{
    边距：0；
    填充：0；
    边框：0；
    字体大小：100%；
    字体：继承；
    垂直对齐：基线；
}
/* 旧浏览器的 HTML5 显示角色重置 */
文章, 除了, 细节, figcaption, 图,
页脚，页眉，hgroup，菜单，导航，部分{
    显示：块；
}
身体 {
    行高：1；
}
哦，你{
    列表样式：无；
}
块引用，q {
    报价：无；
}
块引用：之前，块引用：之后，
q:之前，q:之后{
    内容： '';
    内容：无；
}
桌子 {
    边框折叠：折叠；
    边框间距：0；
}
身体
{
    背景颜色：黑色；
    颜色：黑色;
    字体大小：80%；
    font-family:'Merriweather',georgia,serif;   
    最大宽度：1600px；
    最小宽度：780px；
    文本对齐：居中；
    边距：0 自动；
    行高：1.1；
}
div#容器
{
    文本对齐：左；
    填充：1em 15px；
    边距：2em 5px；
    位置：相对；
    背景：#FFE4BE；
}


div.image
{
    背景：白色；
    最大宽度：80%；
    最大高度：20%；<--- 没有效果！
    溢出：隐藏；
    边距：0 自动；
    显示：块；
    填充：2em 2% 1em 2%；
}
div.image img { 宽度：100%; 边距：0 自动；显示：块；}
div.image div.title { 字体大小：160%; 字体粗细：粗体；文本对齐：居中；边距顶部：0.25em；}
div.image div.caption { 字体样式：斜体；文本对齐：居中；}
</style>
</head>
<正文>
<div id="容器">
<div id="正文">
<div class="图片">
<img src="construction.jpg">
<div class="title">构造</div>
<div class="标题">
<p>事实证明，我们还没有为 Beta 用户做好准备。</p>
<p>我们很快就会提供一个邮件列表。定期回来看看！</p>
</div>
</div>
</div>
</div>
</正文>
</html>
4

3 回答 3

0

用于* html即。

* html .whatever{
height:100%;
}
于 2011-02-10T02:23:28.403 回答
0

对于您正在做的事情，将图像容器设置为具有良好的边距并将最大宽度设置为 100% 会更容易。无论如何，您可能不想强制最大高度小于视口，因为人们习惯于垂直滚动以查看大/长图像。

于 2011-02-10T02:26:59.880 回答
0

你需要采取一种新的方法来解决这个问题——使用 max-height 来缩放图像是完全错误的做法，而且你很可能永远不会达到你喜欢解决方案的地步。

如果我是你，我会回到绘图板并重新考虑布局（不是设计，只是标记和 css）并尝试以另一种方式达到设计目标。

于 2011-02-10T08:18:19.343 回答