Although it has a seemingly awesome topic, this article can be said to be a pastime for people with pain in their stomachs (such as me~)~ Usually developers have their own way of relaxing. It originated from a question about borders asked by someone xd in the forum, so I decided to find out. It didn’t take long to write the article, but it took a long time to prepare the pictures. In this article, let's take a look at how each browser understands borders.
The browsers participating in this test include almost all browsers under Windows: ie6, ie7, ie8, ie9preview, chrome, firefox, safari, opera, seamonkey. Each version is the latest version downloaded from the Internet. And because in this test, the performance of IE678 was consistent, and firefox and seamonkey were nepotism, so they were merged into IE8 and firefox. The picture below is a screenshot of this browser:
.jpg)
The above order is intentional. The reasons will be shown in the test below, and the screenshots are also arranged in this order.
First look at the picture below. A 20X20 DIV is displayed in six browsers, with a border of top: 2px and the rest 1px. There seems to be no difference. This is because the subtlety of 1px prevents us from paying attention. (In fact, we don’t need to care about this whole issue~)
.jpg)
First simplify the problem, one side is 2px, three sides are 1px, and enlarge the result 5 times. We can clearly see this difference - Opera and Safari are opposite, IE8 lacks arms and legs, and the following three guys are consistent ~ here It should be noted that the second row of 3 has a gradual effect at the intersection.
.gif)
Maybe we should make this effect more visible. When only one side is bolded (10px), the quirks of IE8 are clearly revealed. opera and safari are still relative. The following three united fronts gradually become more obvious.
.gif)