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

Question

So the problem is the object tag. 所以问题出在对象标签上。 it simply refuses to scale heightwise. 它只是拒绝高度缩放。 chrome works perfect. 镀铬完美。 IE and firefox it stays the default height. IE和Firefox保持默认高度。 I am having a really hard time finding cross-browser code. 我很难找到跨浏览器的代码。 From what I have found from other threads and sites is that the parent container needs to have a height set. 从其他线程和站点发现，父容器需要设置高度。 so that is why you see height settings on html and body and the <div id="calendar"> . 因此，这就是为什么您在html和body以及<div id="calendar">上看到高度设置的原因。 Although I understand the theory it still doesn't work. 尽管我了解理论，但它仍然行不通。

side note: the reason for the inline css is cause that's where i do my css testing. 旁注：内联css的原因是原因，这就是我进行css测试的地方。 and i didn't make a fiddle because the object is like 80+ files and i don't know how to use jsfiddle that well and kinda feel like that isn't going to be able to get the calendar in there. 而且我没有摆弄小东西，因为该对象就像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

So the problem is the object tag so where's the tag? 所以问题是object tag在哪里？ And for the question you asked why you need this 对于这个问题，你问为什么需要这个

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

is because when you use height: 70%; 是因为当您使用height: 70%; for child element than the question arises 70% of what? 对于子元素而言，比问题产生的70%还要多？ So when you define height to parent in % it defines 70% of 100% 因此，当您以%定义父级的高度时，它定义了100% 70% 100%

Answer 2

Your code was also broken in Safari, but my solution seems to have fixed that. 您的代码在Safari中也被破坏，但是我的解决方案似乎已解决了该问题。

This version validates: 此版本验证：

http://jsfiddle.net/zu9cL/ http://jsfiddle.net/zu9cL/

Maybe it will work for you. 也许它将为您工作。 Generally, Explorer hates invalid code. 通常，资源管理器讨厌无效的代码。

I believe you had two root problems. 我相信您有两个根本问题。

used 50% within width attribute and improperly closed <object> tag (invalid HTML) 在width属性中使用了50% ，并且未正确关闭<object>标记（无效的HTML）
failure to define height on parent element <form> 无法在父元素<form>上定义height

I used no inline CSS in my demo but feel free to put your CSS back "inline" if you wish, it will still work. 我在演示中未使用任何内联CSS，但是可以随意将CSS放回“内联”，它仍然可以使用。

HTML: HTML：

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

CSS: CSS：

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

It all works the same with CSS placed "inline". 放置在“内联”中的CSS的所有功能均相同。

jsFiddle Demo jsFiddle演示

HTML: 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