网页设计何去何从？
URL：http://blog.iyi.cn/start/2005/04/post_67.html
本想设计重新设计个界面，却碰到了棘手的问题，不得不放弃。（本文问题已基本解决:〉谢谢关注！详细请看width|height到底定义什么）
问题来自浏览器，首先是ie，现在xhtml标准已经渐渐被人们重视，要设计界面自然是按照标准来了，真正做过的人肯定会知道，界面设计起来跟html有些出入！
首先做一个简单的html页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Html </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body {
margin:0px 0px 0px 0px;
text-align:center;
}
.mainbody{
height:200px;
width:100%;
font-size: 40px;
background:#B5B4C9;
padding:10px;
}
</style>
</HEAD><BODY>
<div class="mainbody">
this is a 100% width table!
</div>
</BODY>
</HTML>
ie下面看一下，没有任何问题，firefox下一看，下面有滚动条了！问题出在padding:10px;去掉就好了，好是好了，界面怎么设计？除非你不用百分比- -
那就不考虑firefox了，毕竟还是少数人在用。
再回到ie，上面的页面是传统的html格式，我把它改成xhtml标准格式，只要改一下头部就行了：
<!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>
<title> Html </title>
<style>
body {
margin:0px 0px 0px 0px;
text-align:center;
}
.mainbody{
height:200px;
width:100%;
font-size: 40px;
background:#B5B4C9;
padding:10px;
}
</style>
</head><body>
<div class="mainbody">
this is a 100% width table!
</div>
</body>
</html>
这些下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>
<title> Html </title>
<style>
body {
margin:0px 0px 0px 0px;
text-align:center;
font-size: 20px;
}
.mainbody{
height:200px;
width:600px;
background:#B5B4C9;
padding:0px;
}
.left {
height:100px;
float:left;
margin:10px;
border:0px;
padding:0px;
width:280px;
background:#FFFFFF;
}
</style>
</head><body>
<div class="mainbody">
<div class="left">
this is a left table!
</div>
<div class="left">
this is another left table!
</div>
</div>
<div> </div>
<div class="mainbody">
this is the mainbody table!
</div>
</body>
</html>
问题又来了！
ie下面：mainbody的宽度是600px，left 的宽度是280px，padding:10px，两个加起来总共600px，刚刚好在一行才对，怎么就换行了呢？该小一点，left的宽度改成270px。哈，刚刚好！可是一想又不对，padding是10px，应该是中间20px的间距，上面和两边都是10px才对！这怎么两边根中间一样宽了？经研究发现是float:left在作怪！去掉之后，宽度问题好了，但是又不能并排了- -
firefox下面：这里好像没问题，float:left;没问题，间距也没问题！好像跟ie下面不大一样啊！靠左边了，明明是text-align:center;阿！- -
已经够头痛了，更麻烦的事情还有呢！
<!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>
<title> Html </title>
<style>
body {
margin:0px 0px 0px 0px;
text-align:center;
font-size: 20px;
}
.mainbody{
height:200px;
width:600px;
background:#B5B4C9;
padding:0px;
}
.left {
float:left;
height:100px;
margin:10px;
border:0px;
padding:10px;
width:280px;
background:#FFFFFF;
}
</style>
</head><body>
<div class="mainbody">
<div class="left">
this is a left table!
</div>
<div class="left">
this is another left table!
</div>
</div>
<div> </div>
<div class="mainbody">
this is the mainbody table!
</div>
</body>
</html>
只是在left里面加了个padding:10px; 本想会往里收缩10px，不料却往外扩大了10px - -！惨不忍睹，上面的白框居然超出了后面的蓝框！firefox下面更是侵入了下面的蓝框！
真是郁闷阿！想当初用table的时候咋就没这么多麻烦事？真不知道这些程序员干什么的。
.................问题还多着呢，昨天刚刚作的车米网首页，ie下面看的好好的，今天用firefox一看，哇塞，成了稻田了！
唉，不说了，睡觉去！
评论：
这几天尝试用firefox，处处碰壁。
申请免费QQ的时候选不了城市，看QQ的新闻有四分之一叠在一起。上动网程序的论坛，发贴的时候十分别扭。
chinaren同学录登录进去就什么都干不了了。
郁闷！
by: netiger | April 20, 2005 4:05 PM
个人感觉还是个不成熟的产品，虽然安全性不错，但是使用方便才是硬道理。互联网的炒作有些过热。
by: david | April 20, 2005 6:01 PM
我们被IE主宰了过长的时间，以至于互联网上很多网站都在应用只有在IE内才能看见的东西。ff的出现是对IE的一次挑战，虽然现在它的用户还无法和强大的IE相比，但毕竟给微软了一根眼中钉，总是让它不再像原来那么舒服，而且ff的炒作能够再一定程度上促进标准的推广。
另外，我觉得的用web标准做东西的时候，还是应该以ff为准，再ie中调适的时候，应该在相应的专为ie写的语句上加注释。我是这么认为的。:)
by: March | April 20, 2005 6:38 PM
去试试这个吧div { color:#eee;color:red!important }就知道是怎么回事了。多做几次XHMLT的东东就什么都知道了。还有你的CSS还不到家。知道body > p { font-size:14px; }这样写是什么意思吗？呵呵
by: 景裔 | April 20, 2005 8:33 PM
to 景裔:
受教了，不过我想你可能没仔细看我的文章，或者我说的不够明白。我说的不是css的问题，是浏览器的问题，而且确实存在这些问题。
!important我知道，不过我还是不知道是怎么回事。
body > p { font-size:14px; }我不知道是什么用法。
body p定义的是body之后的p
body,p定义的是body和p
body .p定义的是body之后class是p的元素
body#p定义的是id是p的body
body > p 指的是什么呢？
by: david | April 20, 2005 10:20 PM
是不是可以考虑用js判断浏览器类型，然后载入不同的css？
by: 温泉 | April 20, 2005 11:15 PM
to 温泉:
要解决当然可以找到方法的，只不过事半功倍，有些累赘罢了。
by: david | April 20, 2005 11:32 PM
March。。。怎么到处都是熟人阿……
http://www.my-car.cn/是table的……
楼主：主要的问题我认为还是css基础没打好。。。和我的现状是一样的，到各大css站点逛了一圈，解决不少问题：）
by: Aether | April 21, 2005 3:15 AM
这种特殊的写法我也是看了网易的网页代码后才知道有这样的写法的，意思是所有作为body的子对象的p对象字体尺寸为14px ，其实你还没明白我前面的div { color:#eee;color:red!important }的意思，!important 这个属性只有firefox会去认得，IE是不会去认的，比如上面的color，!important 最好写在后面那IE认到的是第一个，firefox两个都认到，不过!important告诉它哪个是优先考虑的，接下来就不用我说了吧？如果说浏览器有问题的话那个用XHTML做的门户又怎么办呢？
by: 景裔 | April 21, 2005 8:44 AM
呵呵，那我明白了，不过我用你的body > p好像不行，但是这种效果我一般是用body p实现的，我的blog css中有很多这样的用法。important在ie上是可以的阿，我这里可以正常显示红色的文字。
to Aether：
www.my-car.cn是table的，我认为你对xhtml认识有误区，table也是可以用在xhtml里面的。不过www.my-car.cn是html，不是xhtml。因为用了xhtml之后就不好用百分比了。
至于问题的解决，我的blog的样式已经解决了大部分问题，当初改这个界面也费了些功夫，才兼容了ie和ff。
在此感谢各位的关注:)，不过我想说的意思是浏览器的设计缺陷和不统一给网页设计带来了极大的不方便。
by: david | April 21, 2005 11:40 AM
body > p好像也只在firefox下才有效，IE是没效果的，具体你看一下网易的首页。
!important在IE上其实是不行的，不过当只有单个带!important的属性的时候IE就认了。
by: 景裔 | April 21, 2005 5:09 PM
IE仍然是首先，firefox的问题多而且它前途未卜，它真的能担任浏览器首选角色吗？
by: kelu | April 21, 2005 7:03 PM