内容提要:!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 titleDiv Float Sample/title style type= …… |
干脆把外层的Div也修改成为float:left
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
显示结果如下,
这种情况下,Firefox正常了,而IE延续了前面的不正常情况。
外层是float:left,内层最后一个不再float:left
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
显示结果如下,
这和前面第一种加float:left的情况相同。
结论
再重申一次,本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度,是不会出现以上这些问题的。不过,不用min-height就失去了div自动撑大这一个很有必要的特性。
在min-height和float:left的情况下,没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。
进一步试验可以发现,margin遭到的影响在padding上比较好,所以最好是padding和margin都不用,或者只用padding。
两者相同的代码如下,
div { padding:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
显示结果如下,
呵呵,总算是一样了,虽然是凑合着一样了。幸好一样了,否则只好用table了。
当然所有这些情况也许是有合理解释的,说不定增加某一个style的设置,这些问题都迎刃而解了,不过目前我还没有找到这个设置。
关于Doctype
以上代码在下面这些Doctype下试验过,结果相同。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">