Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.9k views
in Technique[技术] by (71.8m points)

css - Chrome and it's handling of %s

When using percentages (%) for the sizing of my elements, Chrome apparently prefers to make up its own rules mathematically.

It is my understanding that when you add 80 + 20, you get 100; right? Okay good. Chrome understands this too. But what if we write the same equation differently. For instance: (78 + 1 + 1) + (18 + 1 + 1) What'd you get? Was it 100? Yeah, me too.

So then can somebody please tell me why Chrome thinks otherwise?

Take two elements and float them alongside one another. Then, apply width:20% to one element and width:80% to the remaining element. You'll notice that 100% of the page (or container) has been occupied by both elements side-by-side. However, let's keep it simple and add a padding of only 1% to both sides of each element. This means one element will have width:18%; padding:1% and the other element will have width:78%; padding:1%. In theory, this should still have the same result: 100% of the page (or container) is occupied by both elements side-by-side. But in Chrome, this simply isn't so. It falls short.

The proof is in the pudding: jsfiddle (you'll notice the slight differences if you're using Chrome).

It's frustrating because when it all adds up, especially with a higher volume of elements being used side-by-side, it can really throw a layout out of whack. I know that by creating child elements to take care of padding and/or the margins, we can avoid the situation, but this can lead to the use of markup that would otherwise be redundant.

I just need an explanation as to why Chrome behaves this way (maybe it's a Webkit thing altogether, I haven't tested it yet).

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

It's a bug.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...