ff 的老问题, 可恶的 height 100% 问题.

inshua 2008-03-24 03:35:22
请看下面的代码.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
/*
*{
width : 100%;
height: 100%;
}
*/
#divTest{
width:100% !important;
height:100% !important;
display: inline;
overflow: auto;
clear: both;
content: close-quote;
}
</style>
</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" style="width:100%; height:100%; table-layout:fixed; clear:both;">
<tr>
<td valign="top" width="200px" height="100px" bgcolor="#999999">
<div style="width:100%; height:100%; overflow:auto">
<p>离离原上草</p>
<p>一岁一枯荣</p>
<p>野火烧不尽</p>
<p>春风吹又生</p>
<p>远芳侵古道</p>
<p>晴翠接荒城</p>
<p>又送王孙去</p>
<p>萋萋满别情</p>
<p>离离原上草</p>
<p>一岁一枯荣</p>
<p>野火烧不尽</p>
<p>春风吹又生</p>
<p>远芳侵古道</p>
<p>晴翠接荒城</p>
<p>又送王孙去</p>
<p>萋萋满别情</p></div></td>
<td rowspan="2"> </td>
</tr>
<tr>
<td valign="top"><div id="divTest">
<p>离离原上草</p>
<p>一岁一枯荣</p>
<p>野火烧不尽</p>
<p>春风吹又生</p>
<p>远芳侵古道</p>
<p>晴翠接荒城</p>
<p>又送王孙去</p>
<p>萋萋满别情</p>
<p>离离原上草</p>
<p>一岁一枯荣</p>
<p>野火烧不尽</p>
<p>春风吹又生</p>
<p>远芳侵古道</p>
<p>晴翠接荒城</p>
<p>又送王孙去</p>
<p>萋萋满别情</p>
<p>离离原上草</p>
<p>一岁一枯荣</p>
<p>野火烧不尽</p>
<p>春风吹又生</p>
<p>远芳侵古道</p>
<p>晴翠接荒城</p>
<p>又送王孙去</p>
<p>萋萋满别情</p></div> </td>
</tr>
</table>
</body>
</html>
在 ie6, 左下角和左上角都有滚动条, 而在 ff——它令人气愤的把页面拉长了。 关于这个问题我 google 了一个上午,ff 的支持者表示,这是符合标准的, ie 才不符合标准。 这些标准的傻瓜。

兄弟们一起讨论一下, 怎么在 ff 中让表格不拉大,让滚动条出现。
...全文
256 点赞 收藏 20
写回复
20 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
silence2k 2008-03-26
套用"实践是检验真理的唯一标准"
我认为 标准不是唯一的 事实的标准才是唯一的标准
否则就不会出现这么多的css hack了
说明各个浏览器都不能完全理解或者是统一理解标准的含义

我们不能制定标准 所以我们需要做的 就是 让实现出来的结果对用户看来是一致的
我的实现也不是div布局 也可以 table ,只是一个实例 换其他的也简单

使用什么方法 关键看各人习惯 以后怎么好维护最好
回复
inshua 2008-03-26
[Quote=引用 13 楼 chinmo 的回复:]
如果你想知道为什么,那么你有必要知道IE的quirks mode与standards mode的区别。因为低版本的IE对网页的解释结果与W3C标准不一致,所以IE6为了兼容为IE4设计的网页而拥有quirks和standards两种模式,当它认为网页是老式网页时就用quirks模式按照老一套的模型来解释,否则就按照standards模式尽量符合标准的解释。

那么如何知道网页是否为老的IE4设计呢?因为在IE4时代大多数人不声明doctype,或者doctype为html4,因此当看…
[/Quote]

谢谢, 我对 ie 的有两种模式有经验,但没有深入了解.这位大侠阐述的很明确.

标准不标准对我并不重要, 我要的是实现功能. 通过 js 肯定是可以做到的, 我之前也是用 js 来实现的. 如用 silence2k 大侠推荐的用 div 来布局也不失为一个好办法.

虽然如此, 对这个无聊的标准里愚蠢的 100% 定义, 我还是非常不满. 不知道能不能用什么办法绕过这个坎, 同样达到表格布局的功能. 表格布局都用了这么多年了, 难道因为这个无聊的标准就要放弃? 如果带着这个镣铐也能跳舞足以说明我们水平很高, 这个问题我google 了很久, 外国人也没办法, 一般只有标准爱好者在阐述标准是这么规定的.

像 100% 高度问题, 大家也想到了办法:
html, body{
height : 100%;
}

或许嵌入元素的 100% 高度也可以找到办法解决吧.
回复
silence2k 2008-03-26

我把昨天我发的修改了下
给你发个完整的 全用百分比为单位
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
是可以用的 但不要带后面的规则链接
FF/IE下测试均完美


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>position</title>
</head>
<style>
.scroll{SCROLLBAR-FACE-COLOR: #eeeeee;
OVERFLOW-X: hidden; OVERFLOW: auto;
SCROLLBAR-SHADOW-COLOR: #999; SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-DARKSHADOW-COLOR: #a99;
height:20%;
width:200px;position: absolute;top: 0; left: 0;position: absolute;
}
.scroll2{height:80%;z-index: 0; left:0;top: 20%;
}
</style>
<body>

<div class=scroll>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
</div>

<div class="scroll scroll2">
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> df
asdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> d
fasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> d
fasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>

dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> d
fasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
</div>

</body>

</html>

回复
silence2k 2008-03-25
只是是上面 是实际数字 下面又是百分比 所以在计算时候 有点困难
如果上面高度也是百分比 就好作了
margin-top就用百分比表示
下面的也用百分比表示高度

也就是 统一用 百分比作为单位
回复
silence2k 2008-03-25
在ff 和ie下 分别 按 F11键 左下的 区域可以伸缩
可能定义不是很规范 稍作修改 还是可以实现的

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<style>
.scroll{SCROLLBAR-FACE-COLOR: #eeeeee;
OVERFLOW-X: hidden; OVERFLOW: auto;
SCROLLBAR-SHADOW-COLOR: #999; SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-DARKSHADOW-COLOR: #a99;
height:125px;
width:200px;position: absolute;top: 0; left: 0;
}
.scroll2{height:83%;position: relative;z-index: 0; left:-10;margin-top:10%;
}
html>body .scroll2{height:80%;left:-8;margin-top:10%;
}
</style>
<body>
position: relative;
<div class=scroll>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
</div>

<div class="scroll scroll2">
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br> dfasdfas<br>
</div>

</body>

</html>

回复
silence2k 2008-03-25
不是你这样做的拉 我找个代码给你
回复
jackyBody 2008-03-25
不要认为习惯了东西就是对的,呵呵。lz的问题实现方案有两种;
1.去掉文档类型定义,(quicks模式),用table布局 100%有效,可以自适应
2.应用脚本,FX innerHeight ;MSIE的document.body.clientHeight || document.documentElement.clientHeight (浏览器的版本)
回复
cloudgamer 2008-03-25
考虑用js实现吧
回复
FireFox不支持body{height:100%;},然后其它的对象div{height:100%}一样不支持,
你清楚下浮动看看
回复
http://www.8go8.com/blog/post/20060821122837.html
了解一下别人的问题,你会收获不小
回复
如果你想知道为什么,那么你有必要知道IE的quirks mode与standards mode的区别。因为低版本的IE对网页的解释结果与W3C标准不一致,所以IE6为了兼容为IE4设计的网页而拥有quirks和standards两种模式,当它认为网页是老式网页时就用quirks模式按照老一套的模型来解释,否则就按照standards模式尽量符合标准的解释。

那么如何知道网页是否为老的IE4设计呢?因为在IE4时代大多数人不声明doctype,或者doctype为html4,因此当看不到doctype或者doctype为html4时,就用quirks mode;当doctype为xhtml时就用standands mode。因为ASP.NET 2.0与VS2005是设计为符合标准的,因此它会自动帮你添加xhtml的doctype,也就是顶头的这一句:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

很多习惯使用table布局的人,都习惯了quirks mode的行为,所以遇到standards mode就会无法解释其中的一些问题。例如height=100%这个问题吧,在quirks mode当中,body即使没有内容,它的height也是整个浏览器的高度,因此body里面放一个height=100%的table将会占满整个浏览起。然而standards mode不同,没有内容的body高度为0,因此它内部那个height=100%的table高度也为0。
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
你加上这个你就明白了
你加上以后IE也会出现FF的那情况,由于IE6不符合W3C标准,所以使用100%有所区别
回复
[Quote=引用 7 楼 inshua 的回复:]
昏头了,贴错版本了,这是对大家宝贵时间的浪费,深表歉意。


HTML code<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档 </title>
<style>

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

#divTest{
width:100%;
height:100% ;
overflow: auto;
}
</style>
</head>

<body>
<table border="1" cellpadding="0" cellspa…
[/Quote]

都是我说的那样,自己理解下就明白了
回复
inshua 2008-03-24
昏头了,贴错版本了,这是对大家宝贵时间的浪费,深表歉意。

<html > 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档 </title>
<style>

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

#divTest{
width:100%;
height:100% ;
overflow: auto;
}
</style>
</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" style="width:100%; height:100%; table-layout:fixed; clear:both;">
<tr>
<td valign="top" width="200px" height="100px" bgcolor="#999999">
<div style="width:100%; height:100%; overflow:auto">
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p>
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p> </div> </td>
<td rowspan="2">  </td>
</tr>
<tr>
<td valign="top"> <div id="divTest">
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p>
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p>
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p> </div> </td>
</tr>
</table>
</body>
</html>


从这个版本可以观察到以下效果:
在 ie6 中,左上左下都有滚动条。表格铺满窗口,不会自动增长,因此左下角也有滚动条。
在 ff 中,左下角没有滚动条,由于内容溢出,表格会自动增长,严重破坏页面布局。
需要注意的是,在 ie6 加上那段无聊的 DOCTYPE 也会出错,因为 ff 的做法就是按那个极具想象力的标准来的,如强制 ie 使用此无聊标准,也将失去和谐的页面。

这个问题的起因是左下角的单元格没有明确指定大小,由浏览器计算出。标准对 100% 的理解完全脱离现实。这个问题我曾经遇到过,以前是通过脚本调整的。事后感觉用脚本的方法还是不够优雅。这次又遇到这个问题,拿出来和大家探讨一番。
回复
你的那个就算在IE下也只有左上角有滚动条,左下脚没有
是由于你没固定高度造成的
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档 </title>
<style>
/*
*{
width : 100%;
height: 100%;
}
*/
#divTest{
width:100%;
height:100%;
overflow: auto;
/*display: inline;
clear: both;
content: close-quote;*/
}
</style>
</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" style="width:100%; height:100%; table-layout:fixed; clear:both;">
<tr>
<td valign="top" width="200px" height="100px" bgcolor="#999999">
<div style="width:100%; height:100%; overflow:auto">
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p>
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p> </div> </td>
<td rowspan="2">  </td>
</tr>
<tr>
<td valign="top" height="453px"> <div id="divTest">
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p>
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p>
<p>离离原上草 </p>
<p>一岁一枯荣 </p>
<p>野火烧不尽 </p>
<p>春风吹又生 </p>
<p>远芳侵古道 </p>
<p>晴翠接荒城 </p>
<p>又送王孙去 </p>
<p>萋萋满别情 </p> </div> </td>
</tr>
</table>
</body>
</html>


左下脚和左上角都有滚动条
回复
左上角有滚动条
回复
我的在FF下有滚动条
回复
inshua 2008-03-24
我已经故意把 dreamweaver 生成的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 去掉了.

哪位帅哥能在这个愚蠢的标准下调出滚动条.
回复
myvicy 2008-03-24
这个问题我觉得你还是应该向标准看齐。
在你的页面头部加上这个,然后在到ie下看看是什么效果.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
并且再到ff下看看如何.
这是你如果在把滚动条都调制出来,然后再分别到ie和ff下看看是否一样了.
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2008-03-24 03:35
社区公告
暂无公告