The rendering method of the border attribute in the browser has been discussed in the QQ group for a long time, and I have always used border:0 none; to deal with it. Of course, there are also reasons why I do it. This reason will be mentioned in the analysis below. Before analyzing the border properties, a few points that need to be explained are:
In order to better compare the border styles, here we choose the "button" element, but the tags used are different. They are input tag elements and button tag elements. By the way, one thing that needs to be mentioned is that what these two label elements have in common in various browsers is that they are both system control elements. The border style and button background have an absolute relationship with the system theme.
Using the same XHTML structure code, compare the FF browser and IE browser respectively.
<input type="button" value="Button" />
<hr />
<button>Button</button>
Demonstration animation 1 Demonstration animation 2
Through the influence of the default style of the current system theme, we found that the IE browser already has a little difference in the parsing of the two tag elements, button and input, but as far as the page seen in the current system theme is concerned, The performance effect is almost the same. Students who are interested in this point can experiment by themselves. In the attribute results seen in the above column without any CSS style definition, the result we get is:
*FF Browser: The border styles of input tags and button tags are border-width:3px; border-style:outset; border-color:#E5E5E5;
* IE browser: The input label border style is border-width:2px; border-style:outset; and the button label border style is border-width:2px;
With this data, let's take a look at what the result will be when we define a style for the border attribute.