Analyze the rendering method of border attributes in the browser

Analyze the rendering method of border attributes in the browserThe first blog, if you feel that the content is good but to reprint friends please do not pity http://blog.linxz.cn/such a URL, thank you!

The rendering method of the border attribute in the browser has been discussed in the QQ Group for a long time, and I have been processing it in the border: 0 none; mode. Of course, it is also the reason why I have to do it myself. The reason will be described in the following analysis. Before analyzing the border attributes, you must specify the following items:

1. I am not an analysis expert. I only use Firebug and IE developer to view the rendering results of the browser in the FF browser and IE browser;
2. Because only the rendering results of FF and IE browsers are viewed, it does not mean that all browsers are rendered in the same way.

In order to better compare the border style, the "button" element is selected here, but the labels used are different. They are the input Tag Element and the button Tag Element. One thing that needs to be mentioned here is that the two tag elements in each browser all belong to the system control element, and the border style and button background are all absolutely related to the system subject.

Use the same XHTML Structure Code for comparison between the FF and IE browsers.

<Input type = "button" value = "button"/>
<Hr/>
<Button> button </button>

Demo Animation 1 demo Animation 2

By default, the style of the current system topic is affected. We found that there is a difference in details in the resolution of the two tag elements "button" and "input" in IE, however, the page performance shown in the current system topic is almost the same. If you are interested in this, you can try it yourself. In the attribute result of no CSS style definition seen in the above column, the result is:

* FF Browser: The border style of the input and button labels is border-width: 3px; border-style: outset; border-color: # e5e5;
* IE browser: The border style of the input label is border-width: 2px; border-style: outset; and the border style of the button label is border-width: 2px;

With this data, let's take a look at what will happen after we define a style for the border attribute.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page