supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
阅读:11782回复:33

大家来看看,这是firefox的问题吗?

楼主#
更多 发布于:2005-07-27 15:15
http://www.x2design.net
看看这个网站,是符合标准的
但用firefox显示一团糟,因为firefox对css的支持太差?
在ie下显示是完全正常的

各位高手请指教!
猫头猪
狐狸大王
狐狸大王
  • UID163
  • 注册日期2004-11-25
  • 最后登录2005-12-04
  • 发帖数595
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
1楼#
发布于:2005-07-27 15:15
你说的符合标准是指通过validator么?
说的重一些,你的网页就好像一个通过编译却满是bug的程序.
举个例子,你在css中将dl#Comments  dd的高度设置成了20px,这样,当comments的实际高度超过20px的时候,就不可避免的发生了重叠.
然后的"发表留言",你为dl#PostMsg dd设置了固定高度height:26px,而textarea的实际高度为120px,远超过了这个高度,自然又和下面的重叠.CopyRight中的重叠也都是乱设置height的结果.
Firefox不过是依照你的css做出了正确的渲染.
另外,你的网页结构太乱,form居然被作为顶级的元素,其他东西全在一个form里.内容部分多余的div太多太乱,主要内容部分居然靠float:right来定位,浏览器稍微宽一点你的页面就走样了.如果拿这样的页面来完成你的网页设计作业,恐怕很难及格.
客游
千年狐狸
千年狐狸
  • UID5736
  • 注册日期2005-05-06
  • 最后登录2012-10-09
  • 发帖数1363
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
2楼#
发布于:2005-07-27 15:15
猫头猪,看来你狠!
supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
3楼#
发布于:2005-07-27 15:15
感谢版主的回复!
习惯了在ie中用元素撑开页面,
今天用firefox一看却大吃一惊,
看来我对标准的理解还是有失偏颇,呵呵

顺便请教:
如果firefox的渲染完全按照css指定的高度,那一个容器内的文字行数超过指定高度怎么办?这种情况不能指定高度?
还有就是我的发表评论,也是靠撑开的,也不需指定高度?
我用了很多div是因为为了实现四个边的背景框,以及四个角的图片,光这些就需要8个div,不知道有没有更好的解决办法?

另外,顶级元素为form是asp.net需要的。否则控件无法运行。
supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
4楼#
发布于:2005-07-27 15:15
对了,不用float该用什么合适呢?
为什么float不行?
Minisheep
小狐狸
小狐狸
  • UID2333
  • 注册日期2005-01-19
  • 最后登录2006-10-23
  • 发帖数80
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
5楼#
发布于:2005-07-27 15:15
我的建议:
1、试着给给body加上width
2、定位尽量用float:left
3、定位层尽量不要设置height,加上float:left,它就能自动撑开。然后后面不想自动撑开的东西可以用clear:both或clear:left来还原。
4、边框的话,你可以将最上面和最下面部分分别合成一个图,分别放进2个层里,一上一下。中间部分也做一个图,1px高的,然后用repeat-y放进中间的层,设置好各层的margin和padding。内容也放在中间的层。
你可以参考一下Sulei的Blog,注意他中间圆角的实现方法。

其实在你浏览网页的时候留心一下,就能发现很多CSS的使用技巧
猫头猪
狐狸大王
狐狸大王
  • UID163
  • 注册日期2004-11-25
  • 最后登录2005-12-04
  • 发帖数595
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2005-07-27 15:15

...
顺便请教:
如果firefox的渲染完全按照css指定的高度,那一个容器内的文字行数超过指定高度怎么办?这种情况不能指定高度?
还有就是我的发表评论,也是靠撑开的,也不需指定高度?
我用了很多div是因为为了实现四个边的背景框,以及四个角的图片,光这些就需要8个div,不知道有没有更好的解决办法?

另外,顶级元素为form是asp.net需要的。否则控件无法运行。


指定高度的意思是你希望无论什么情况下都以这样的高度来显示.如果你没有这样的需要,计算高度本来就很合适,大多数情况下是无需设置固定高度的.需要不需要指定高度,是你的设计而定的.如果你需要的是一个最小高度,不能比这个高度小,而大则自动撑开,你应该选择设置min-height.我需要重复的是,除了个别情况,很少地方是需要设置固定高度或者最小高度的.

css排版的技术,网上有很多非常好的例子,google一下,多看看.div是值得推荐的排版方式,但是如果滥用,得到的结果可能还不如用table.

form必需是form element的顶级元素是有道理的,但必需是整个网页的顶级元素是毫无道理的.asp.net也不会这样要求.网上asp.net的网页很多,没有哪个是以form做顶级元素的.

float不是不能用,但你只用一个float:right,在我这里1280x1024的显示效果下就是左边一个sidebar,右边一块内容,中间空一大块白.
supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
7楼#
发布于:2005-07-27 15:15
Minisheep:我的建议:
1、试着给给body加上width
2、定位尽量用float:left
3、定位层尽量不要设置height,加上float:left,它就能自动撑开。然后后面不想自动撑开的东西可以用clear:both或clear:left来还原。
4、边框的话,你可以将最上面和最下面部分分别合成一个图,分别放进2个层里,一上一下。中间部分也做一个图,1px高的,然后用repeat-y放进中间的层,设置好各层的margin和padding。内容也放在中间的层。
你可以参考一下Sulei的Blog,注意他中间圆角的实现方法。

其实在你浏览网页的时候留心一下,就能发现很多CSS的使用技巧
回到原帖


谢谢你的建议。我会试一试的。
对于边框我一开始也考虑到用固定宽度的顶端图片,但最后还是考虑到宽度扩展的灵活性而使用了边角图片分离的方案,这样改变宽度时顶端效果也不会变形。
div用的的确多了一点,搞得我也很郁闷,但要实现我想要的效果,似乎一个都不能省掉。
supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
8楼#
发布于:2005-07-27 15:15


指定高度的意思是你希望无论什么情况下都以这样的高度来显示.如果你没有这样的需要,计算高度本来就很合适,大多数情况下是无需设置固定高度的.需要不需要指定高度,是你的设计而定的.如果你需要的是一个最小高度,不能比这个高度小,而大则自动撑开,你应该选择设置min-height.我需要重复的是,除了个别情况,很少地方是需要设置固定高度或者最小高度的.

css排版的技术,网上有很多非常好的例子,google一下,多看看.div是值得推荐的排版方式,但是如果滥用,得到的结果可能还不如用table.

form必需是form element的顶级元素是有道理的,但必需是整个网页的顶级元素是毫无道理的.asp.net也不会这样要求.网上asp.net的网页很多,没有哪个是以form做顶级元素的.

float不是不能用,但你只用一个float:right,在我这里1280x1024的显示效果下就是左边一个sidebar,右边一块内容,中间空一大块白.


版主,或许你真的太牛了,是专家级的人物,可以让你以这样的语气说话,真的不知道你的怒气从何而来。

说实话,从你的答复中我仅知道了一点,就是firefox是根据指定的height的高度来渲染的,如果不需要固定高度,那么就不指定。

讨论一下height的问题:根据ie的效果,可以推断ie总是根据计算长度来渲染。
照你的意思,firefox是尽职的。但我觉得firefox还是会忽略其它的效果的,比如padding,我设置了padding 5px,但效果明显是padding没起作用,可见firefox为了height,而会忽略padding的效果。
从这个有bug的代码来看,firefox是先height后padding,ie是先padding后height。
如果从智能性的角度看,ie更能理解我要的效果。虽然那不一定是一件好事。微软向来以喜欢做自作聪明的软件而闻名。

你描述了很多弊病,可惜没有解决方案:
div如果是滥用,但要实现我要的效果哪些可以省略?
float如果不行,那有什么样的替代方案?
对于form的问题,为什么form不能作为顶级元素?
还有,你说“网上asp.net的网页很多,没有哪个是以form做顶级元素的.”;
不知道何以由此结论,为了确认,我仅查看了csdn的blog,发现form同样是body下的顶级元素,其它的就不用看了。
vs.net默认生成的网页就是form开头的。
猫头猪
狐狸大王
狐狸大王
  • UID163
  • 注册日期2004-11-25
  • 最后登录2005-12-04
  • 发帖数595
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
9楼#
发布于:2005-07-27 15:15

版主,或许你真的太牛了,是专家级的人物,可以让你以这样的语气说话,真的不知道你的怒气从何而来。

说实话,从你的答复中我仅知道了一点,就是firefox是根据指定的height的高度来渲染的,如果不需要固定高度,那么就不指定。

讨论一下height的问题:根据ie的效果,可以推断ie总是根据计算长度来渲染。
照你的意思,firefox是尽职的。但我觉得firefox还是会忽略其它的效果的,比如padding,我设置了padding 5px,但效果明显是padding没起作用,可见firefox为了height,而会忽略padding的效果。
从这个有bug的代码来看,firefox是先height后padding,ie是先padding后height。
如果从智能性的角度看,ie更能理解我要的效果。虽然那不一定是一件好事。微软向来以喜欢做自作聪明的软件而闻名。

你描述了很多弊病,可惜没有解决方案:
div如果是滥用,但要实现我要的效果哪些可以省略?
float如果不行,那有什么样的替代方案?
对于form的问题,为什么form不能作为顶级元素?
还有,你说“网上asp.net的网页很多,没有哪个是以form做顶级元素的.”;
不知道何以由此结论,为了确认,我仅查看了csdn的blog,发现form同样是body下的顶级元素,其它的就不用看了。
vs.net默认生成的网页就是form开头的。

我没有什么怒气,如果我的语气让你不舒服,还请原谅,我只是在陈述一些实事,并没带什么语气.网上的交流或许会在语气上有一些猜想和误解.就象我对你随便对Firefox下结论的语气也很不以为然.

关于padding和height的关系,我建议你看看css的box model.相信你做网页设计,手边不会连一本象样的css手册都没有.这里有一个链接,也可以看一下:
http://www.w3.org/TR/CSS21/box.html
IE5中的box model是有bug的.IE 6在quirk mode和standard mode下对box model也有不同的解释.
http://css.maxdesign.com.au/listamatic/ ... xmodel.htm
你或许觉得ie的这些错误是什么智能,可是不少人为这种"智能"挠破头皮呢.

我没有给你提出建议因为我不知道你到底要达到什么效果,而且你的这些问题也不是一两句话就能解决的.如果照我的意思,修改基本上更浪费时间,全部推翻重来比较合适.这里有一篇css layout的文章,如果你原意可以读一读,或许有所启发:
http://www.webreference.com/authoring/s ... /advanced/
这里还有一个网站:
http://cssvault.com/
搜集了很多很不错的例子,我在本站已经推荐了很多次.也希望你以后可以多用搜索.

asp.net中关于form的要求可能是我没有调查清楚.不过这样的要求未免有些搞笑,算我少见多怪吧.
gzpbx
狐狸大王
狐狸大王
  • UID1527
  • 注册日期2004-12-29
  • 最后登录2009-06-30
  • 发帖数410
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
10楼#
发布于:2005-07-27 15:15
DIV布局真的那么好吗?这次我就在新的项目中尝试使用div布局!
如果你爱上了一朵生长在一颗星星上的花,那么夜间你看着天空就感到甜蜜愉快。所有的星星上都好象开着花。
猫头猪
狐狸大王
狐狸大王
  • UID163
  • 注册日期2004-11-25
  • 最后登录2005-12-04
  • 发帖数595
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
11楼#
发布于:2005-07-27 15:15
gzpbx:DIV布局真的那么好吗?这次我就在新的项目中尝试使用div布局!回到原帖

这个也是仁者见仁智者见智的问题.
我个人觉得div布局在结构上清晰一些,和css配合的也好一些.
supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
12楼#
发布于:2005-07-27 15:15
不知道版主从哪里看出我对firefox随便定性了,我只是发出一个疑问而已。
我对ie和firefox都没有什么偏见,我只希望做出来的网页在两者上都能显示的很好。
你的语气相信看过贴的人都看的出来,如果那是你陈述事实的风格,那无话可说。

height和padding的含义我是清楚的,但现在是ie和firefox有不同的优先解决顺序。对待这样一种无法同时满足的属性,从客观的角度讲,好像无法说ie的解析是错误的,firefox才是正确的。

用了很多div,原因在8楼已经描述清楚了,这样一种需求究竟该怎么解决合适?

float的问题还是没有明白,在一个大的div里用float来指定里面两个div的左右排列不合适吗?为什么会跑到浏览器的两端?大的div我是指定了宽度的。
gzpbx
狐狸大王
狐狸大王
  • UID1527
  • 注册日期2004-12-29
  • 最后登录2009-06-30
  • 发帖数410
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
13楼#
发布于:2005-07-27 15:15
div居中我还没搞定哪,div + css 布局真是给自己找事,原来的估计是可以不用加班的~

BTW: Form 肯定是顶级元素呀,aspx生成的默认代码就是这样的~

贴上几篇文章:
http://www.sulei.net/blog/blog.asp?id=92
http://www.blueidea.com/bbs/newsdetail. ... rune=&lp=1
如果你爱上了一朵生长在一颗星星上的花,那么夜间你看着天空就感到甜蜜愉快。所有的星星上都好象开着花。
supNate
小狐狸
小狐狸
  • UID7615
  • 注册日期2005-07-27
  • 最后登录2005-11-05
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
14楼#
发布于:2005-07-27 15:15
被div布局彻底打败,稍微复杂一点的布局ie和firefox总不能同步的工作,
不得已,还是用了表格和div的混和布局,
现在firefox下总算正常了。
唯一不好解决的还是圆角图片问题,设置margin:-3px,ie下正常,
设置margin:0,firefox下正常
只能取其一了,现在在firefox下看有点突出,总算不是大问题
另外就是xmlhttp和div的innerHtml属性是IE专有,firefox下不能用,郁闷
这么让人舒服的属性要是成为标准多好
上一页
游客

返回顶部