Chrome 到底是出来搅局的?还是出来搅局的.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3860 天前的主题，其中的信息可能已经有所发展或是发生改变。

刚完成了一个网站,忙的要死要活的.在我的IE,FF,CHROME上测试都正常了.然后就交付了.
不到一个小时.客户就发了一张chrome的截图给我.说你看你做的烂东西,都错位了...

然后我就傻掉了..再检查一次还是没问题啊...

然后要到了客户的chrome版本.结果他的是33.说是最新版本.我的是35.也是最新...

这也就罢了...不管怎么样我都是无法重现这个BUG...我要去下载一个33号的版本来么?

这还只是我遇到的chrome很烦人的一点而已...其他比如说行高永远跟别的浏览器不一样,默认字体的显示也跟其他浏览器不一样...
还会出现各种奇怪的BUG.比如说如果把<button></button>中间的文字去掉,就会在下面的两个元素中间出现一条莫名其妙的间隔.加上文字就好了...

我在想是不是该有个什么组织出来抵制Chrome的乱玩行为了...?

请不要对此表示太多关注,我只是想知道到底有没有人跟我一样遇到这种版本不同显示效果就完全不一样然后会产生奇怪错位的问题.

版本

错位

比如说

25 条回复 • 2014-05-31 19:19:35 +08:00

Livid

MOD

2014-05-30 12:29:46 +08:00

你没有用 CSS Reset？

tangzx

2014-05-30 12:32:02 +08:00

切了两年的页面没遇到过这样的问题。

riaqn

2014-05-30 12:33:21 +08:00

w3c干什么吃的

tonghuashuai

2014-05-30 12:33:52 +08:00

我一般都是优先兼容 chrome，然后考虑其他的，这样出现的问题不多

finian

2014-05-30 12:33:55 +08:00

客户是不是放大网页了？

qiuai

2014-05-30 12:35:22 +08:00

@finian 我也在想会不会...
@Livid 我基本上都是从头开始写.还真没用CSS RESET.这已经成为一种共识必须要使用了么?
@tonghuashuai 我是先兼容Firefox.然后其他浏览器再单独写Hack.

chemzqm

2014-05-30 12:38:04 +08:00

这个真不能怪Chrome，想要做出跨浏览器一致体验就永远不要相信浏览器默认值，
推荐使用 http://necolas.github.io/normalize.css/

botao1

2014-05-30 12:54:58 +08:00

@qiuai 从5年前刚学CSS的时候，就用CSS Reset了，又不难，放在一个Global的样式表里就好了

qiuai

2014-05-30 13:00:40 +08:00

@chemzqm 好的.我看下
@botao1 =.=我一直是顺手写*{margin:0;padding:0;}.......以后还是用一下好了...

inee

2014-05-30 13:04:43 +08:00

为什么不用FF开发?

lwbjing

2014-05-30 13:27:31 +08:00

Chrome乱玩？？！！这有意思。。。。

Ryans

2014-05-30 13:30:45 +08:00

@Livid thanks

http://sofish.de/736

83f420984

2014-05-30 13:35:32 +08:00

还没遇到过这种事情

Mutoo

2014-05-30 13:45:44 +08:00

@qiuai *{} 非常影响渲染效率的，会给所有元素稍一份属性。

dong3580

2014-05-30 13:53:07 +08:00

@qiuai
省略一些css关键字有时候是个很糟糕的举动,例如设置为auto; margin,float如果不写具体的数字很容易在陌生的浏览器出现问题.
@Livid
一直都是用不容易出现问题的div之类的解决,尽量不用padding,p,strong之类的东西,
多谢提醒,才知道这么个属性用途很大.

fanzeyi

2014-05-30 14:34:14 +08:00

@Mutoo 不.. 影响渲染效率的似乎是 xxx * {}

qiuai

2014-05-30 14:38:45 +08:00

@inee 我就是用FF开发的...然后chrome就无奈了...
@lwbjing chrome的每一个版本都会有一些奇怪的变动....如果你每个版本都用过的话.经常出现显示效果不一样的情况,
@Mutoo 好吧...其实都是懒惹的祸....
@dong3580 嗯..我基本上就测试IE7-11,FF,chrome...其他的就顺其自然吧.....

kutata

2014-05-30 14:42:05 +08:00

normalize.css
http://necolas.github.io/normalize.css/

有时候我也会遇到你这个问题，需要一些小hack, 不过都是firefox而已。。。

dong3580

2014-05-30 14:51:06 +08:00

@qiuai
我会测试IE7~IE9,火狐,chrome,老版本的opera有时候顺带测试一下,另外有的客户糟糕,让人非得搞定IE6的上的问题,有时候还是不能忍受的,

v5ke

2014-05-30 14:55:22 +08:00

spoon.net/browsers
测试所有浏览器效果

P233

2014-05-30 14:56:22 +08:00

"行高永远跟别的浏览器不一样"

firefox 没给固定行高时，会向上继承行高并上下添加 1px，没法 reset，最好的办法是使用 font-size 属性的时候同时使用 line-height 即使是 line-heigh: 1

normalize 也修正了 firefox 给 input button 等添加默认 margin 的行为

每个浏览器的隐性默认值都会会造成在其他浏览器中的差异，有时候相差 1px 就错行了。推荐看看 Bootstrap 作者 mdo 最近整理的 WTF 系列

http://wtfhtmlcss.com/
http://wtfforms.com/

至于 Button 的问题，猜测有标签没闭合

Sivan

2014-05-30 14:58:50 +08:00

* {} 不会影响效率，只不过重置层级太多，而且样式覆盖过度把不需要重置的也重置了。

建议用 normalize.css

ryanyu104

2014-05-31 18:09:16 +08:00

我也遇到过已经reset过应该就是版本问题

qiuai

2014-05-31 18:13:16 +08:00

@ryanyu104 总算找到跟我遇到一样问题的人了...唉...

ryanyu104

2014-05-31 19:19:35 +08:00

@qiuai 想想IE你就知足吧