How various browsers understand Web page layout borders

Although a seemingly very good topic, but this article can be said to be completely egg pain (such as I ~) a Pastime ~ usually developers have their own way of relaxation. In the Genesis Altar, one of XD asked a question about the border, so he was going to figure it out. It won't take long to write an article, but the drawing is ready for a while. In this article, let's take a few of the different browsers ' understanding of the borders.

The browsers involved in this test included almost all of Windows: Ie6,ie7,ie8,ie9preview,chrome,firefox,safari,opera,seamonkey. Each version is the latest version of the online download. And because of this test, IE678 performance consistent, Firefox and SeaMonkey is a crony, so merge as IE8 and Firefox. The following image is the screenshot of this browser:

The order of the above arrangement is intentional. The following tests show why, and the screenshots are arranged in this order.

First look at this picture below, six browsers display a 20x20 Div, its border is top:2px, the remaining 1px. There seems to be no difference. This is because the 1px is so subtle that we don't care. (In fact, we don't need to care about the whole problem.)

To simplify the problem first, unilateral 2px, three-sided 1px, and the results magnified 5 times times, we can clearly see the difference--opera and Safari, IE8 lack of arms and legs, the following three guys agree ~ here is the second row of 3 in the intersection has a gradual effect.

Maybe we should make this effect more obvious. When only bold unilateral (10px), IE8 's quirks revealed no doubt. Opera and Safari are still relative. The gradual change of the following 3 united front is even more pronounced.