All geek questions in one place

Is there a mistake in safari when calculating percentage width?

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

 <head> <title></title> <style type="text/css"> * { margin:0px; padding: 0px;} #greenbox { border: 5px solid green; margin: 20px; } #redbox { background-color: red; float:left; width: 50%; } #bluebox { background-color: blue; width: 50%; overflow: auto; } </style> </head> <body> <div id="greenbox"> <div id="redbox"> red box </div> <div id="bluebox"> blue box </div> </div> </body>

A frame with a green rectangle and a red frame and a blue box in a green box, both background colors, will appear in the code.

Here's the problem: setting the width of the blue and red boxes to 50%, each of which SHOULD theoretically cover the entire area of ​​the contents of the green box. However, on the right side of the green window there is a blank space of 1 px!

Is this a bug in Safari 5.0.3 (I cannot install any other browser for testing)? Or in my code? Or in CSS? Is there an easy way to fix it?

+4
source share
1 answer

It is not just Safari. John Resign talks about the width of the subpixels on his blog: http://ejohn.org/blog/sub-pixel-problems-in-css/

This question also depends on the actual width of your container.

There was also a thread on SO that talked about this, it seems it can't find it just now.

+4
source

Source: https://habr.com/ru/post/1344454/

More articles:


All Articles