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%什么？因此，当您在%中为父级定义高度时，它会定义70%的{{1}}

Answer 2

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

此版本验证：

http://jsfiddle.net/zu9cL/

也许它会对你有用。通常，资源管理器讨厌无效的代码。

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

在50%属性中使用了width并且不正确地关闭了<object>代码（无效的HTML）
未能在父元素height上定义<form>

我在我的演示中没有使用内联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 Demo

<强> 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 个答案: