Home > Developer > CSS

Detailed explanation of the difference between border: 0 and border: none in css

Source: Internet
Author: User
Tags button type memory usage
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞


Performance differences:

[Border: 0;] although border is set to "0" pixels, it cannot be seen on the page, but according to the default value of border, the browser still renders border-width/border-color, that is, the memory occupied.

[Border: none;] if border is set to "none", that is, no rendering is performed when the browser parses "none", that is, no memory value is consumed.

Compatibility differences:

Compatibility differences only apply to browsers such as Internet Explorer 6 and Internet Explorer 7, as well as tag buttons and inputs. This is true for Windows, Windows 7, and vista XP.

[Border: none;] when border is set to "none", it seems that the border for IE6/7 still exists, as shown below:

Code

The code is as follows: Copy code

<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> difference between borderl: none; and border: 0; </title>
<Style type = "text/css">
Input, button {border: none ;}
</Style>
</Head>

<Body>

<H3> & lt; button & gt; <Button type = "button"> button </button>

<H3> & lt; input & gt; <Input name = "" type = "button" value = "input button"/>

<Br/>
<Input name = "" type = "text" value = "input text"/>

</Body>
</Html>

Effect

 


Note the difference between border: none and border: 0 in firebug.


The following is an example.

The code is as follows: Copy code


<Style>
Div {border: 1px solid black; margin: 1em ;}
. Zerotest div {border: 0 ;}
. Nonetest div {border: none ;}
Div. setwidth {border-width: 3px ;}
Div. setstyle {border-style: dashed ;}
</Style>


<Div class = "zerotest">
<Div class = "setwidth">
"Border: 0" and "border-width: 3px"
</Div>
<Div class = "setstyle">
"Border: 0" and "border-style: dashed"
</Div>
</Div>
<Div class = "nonetest">
<Div class = "setwidth">
"Border: none" and "border-width: 3px"
</Div>
<Div class = "setstyle">
"Border: none" and "border-style: dashed"
</Div>
</Div>

If you are interested, you can copy the above code and try it in this browser:

Test results:
1. zerotest. setwidth
Although border-width: 3px is defined, border-style: none does not have a border (IE7 displays a 3-pixel border, which is related to border: 0 resolution .)
2. zerotest. setstyle
Although border-style: dashed is defined, border-width: 0 is not bounded.
3. nonetest. setwidth
Although border-width: 3px is defined, border-style: none has no border (no border under IE7)
4. nonetest. setstyle
Border-style: dashed border-style is defined. The default value is medium border-color. The default value is black. Therefore, a 3-pixel black dashed box is displayed (one pixel in IE7)

Integrated 1 and 4 can be analyzed in ie6 and IE7:
Border: 0 is parsed as border-width: 0
Border: none is parsed as border-style: none

Let's take a look at the standard browser.


Border: 0: a border-width: 0 is rendered more than border: none, that is, the performance of border: none is higher than that of border: 0. Border: none; it is understood that this label is disabled and set to 0. Although not displayed, it also occupies the memory.

In order to render border-width: 0 Less, and do not occupy memory, here we write an optimal method compatible with all browsers:

Border: 0 none; the preceding 0 is compatible with ie6 and ie7, and the subsequent none is for standard browsers.

The border: 0 none; and border: none 0; ie6 and ie7 are tested in the same way. The advantages and disadvantages of rendering and memory usage need to be further analyzed and tested, the former is recommended.


Summary:

Compared with border: 0; and border: none;, the difference is that there are rendering and no rendering, and the relationship between them and display: none; and visibility: hidden; is similar, while there is no way to test the rendering performance comparison of the border attribute, although they think there is a difference in the rendering performance, it can only be said to be theoretical.

How to make border: none; fully compatible? You only need to add the background attribute on the same selector, as shown in the following example:

The code is as follows: Copy code

<Style type = "text/css">
Input, button {border: none; background: none ;}
</Style>

<H3> button <Button type = "button"> button </button>

<H3> input <Input name = "" type = "button" value = "input button"/>

<Br/>
<Input name = "" type = "text" value = "input text"/>

For border: 0; and border: none; for personal use, border: none;, because border: none; after all, there is no dispute over performance consumption, in addition, the compatibility with available background attributes is insufficient to resolve the issue.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
difference between null and 0 border design black and white difference between and in perl how to border cell in excel difference between constant and variable in math difference between exec and system in perl difference between extends and implements in java
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More