高度css在IE和Firefox中不起作用

Question

所以问题出在对象标签上。 它只是拒绝高度缩放。 镀铬完美。 IE和Firefox保持默认高度。 我很难找到跨浏览器的代码。 从其他线程和站点发现，父容器需要设置高度。 因此，这就是为什么您在html和body以及<div id="calendar">上看到高度设置的原因。 尽管我了解理论，但它仍然行不通。

旁注：内联css的原因是原因，这就是我进行css测试的地方。 而且我没有摆弄小东西，因为该对象就像80多个文件，而且我也不知道如何很好地使用jsfiddle，而且有点感觉无法将日历保存在那里。

<!DOCTYPE html>
<html style="height: 100%" >
<body style="height: 100%" >
    <form >
    <div id="calendar" style="height: 70%">
        <object data="calendar.php" width="50%" style="height: 100%"/>
    </div>
    </form>
</body>
</html>

Answer 1

所以问题是object tag在哪里？ 对于这个问题，你问为什么需要这个

html, body {
   height: 100%;
   width: 100%;
}

是因为当您使用height: 70%; 对于子元素而言，比问题产生的70%还要多？ 因此，当您以%定义父级的高度时，它定义了100% 70% 100%

Answer 2

您的代码在Safari中也被破坏，但是我的解决方案似乎已解决了该问题。

此版本验证：

http://jsfiddle.net/zu9cL/

也许它将为您工作。 通常，资源管理器讨厌无效的代码。

我相信您有两个根本问题。

在width属性中使用了50% ，并且未正确关闭<object>标记（无效的HTML）
无法在父元素<form>上定义height

我在演示中未使用任何内联CSS，但是可以随意将CSS放回“内联”，它仍然可以使用。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form>
            <div id="calendar">
                <object data="calendar.php"></object>
            </div>
        </form>
    </body>
</html>

CSS：

html, body, form {
    height: 100%;
}
#calendar {
    height: 70%;
}
object {
    height: 100%;
    width: 50%;
}

放置在“内联”中的CSS的所有功能均相同。

jsFiddle演示

HTML：

<!DOCTYPE html>
<html style="height: 100%;">
    <head>
        <title></title>
    </head>
    <body style="height: 100%;">
        <form style="height: 100%;">
            <div id="calendar" style="height: 70%;">
                <object data="calendar.php" style="height: 100%; width: 50%;"></object>
            </div>
        </form>
    </body>
</html>

高度css在IE和Firefox中不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-12-11 18:11:12

解决方案2
0 2012-12-11 19:43:19

高度css在IE和Firefox中不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-12-11 18:11:12

解决方案2 0 2012-12-11 19:43:19

解决方案1
1 已采纳 2012-12-11 18:11:12

解决方案2
0 2012-12-11 19:43:19