Cross-browser development experience (1)

Document directory

• Try to use Div + CSS layout instead of table layout.
• Pay attention to the closed relationship of labels, especially when embedding Div and other labels in form labels.
• Use the tbody element when defining a table to ensure that all browsers including Ie can use the table correctly.
• Note the case sensitivity of tags and attributes.
• <SCRIPT> label language and type attributes
• <A> ALT and title attributes of tags
• <Input> tag checked and readonly attributes
• <Option> select ed attribute of a tag
• label align = "absmiddle" attribute
• <IFRAME> frameborder attribute of a tag
• <Table> cellpadding attribute of a tag
• <TD> nowrap attribute of a tag

Cross-browser development experience (1) -- add doctype to the page as HTML

Because different browsers have different interpretations of tags and style sheets, you need to define a standard document type for HTML files so that different browsers can parse and render pages according to a uniform HTML standard.

 ! DoctypeDeclare the DTD that the specified document complies with, for example:

<! Doctype HTML public "-// W 3c // Dtd html 4.0 transitional // en "" http://www.w3.org/TR/html4/loose.dtd ">

 

<! Doctype HTML public "-// W 3c // Dtd xhtml 1.0 transitional // en "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Use Div + CSS layout as much as possible for correct use of standard HTML tags, without table layout.

Table layout can easily cause code redundancy. Compared with <div> </div> writing, there are many codes. In addition, the table needs to be downloaded and displayed, and the corresponding webpage opens slowly.

Use the standardized Page Structure: div + CSS. This layout method has simple code, fast page browsing, and flexible page layout. You only need to change the CSS style during the revision to achieve page re-layout without modifying the program, thus reducing the cost of website revision. 

Pay attention to the closed relationship of labels, especially when embedding Div and other labels in form labels.

Sometimes there will be extra white space on the page, which cannot be avoided even if you re-set the margin. In this case, the elements of the page may be closed and unpaired, such:

<Div class = "outer">

<Form name = "testform">

<Div class = "inner">

<Input name = "title" type = "text"/>

</Form>

</Div>

</Div>

Use the tbody element when defining a table to ensure that all browsers including Ie can use the table correctly.

Even if the table does not display a tbody element, the browser determines that the parent node of the tr node is an automatically added default tbody node. to avoid the possible misunderstanding when using JavaScript to manipulate the tr node, it is better to manually add one, such:

<Table id = "mytable">

<Tbody id = "mytablebody">

<Tr>

<TD>

</TD>

</Tr>

</Tbody>

</Table>

Note the case sensitivity of tags and attributes.

Sometimes, some events bound to elements respond in IE but not in Safari or other browsers. At this time, you need to check the correctness of the event binding method. The binding of advanced events requires two sets of JavaScript code written by IE and other browsers, while the simple event model requires attention to the Case sensitivity of the binding event name. For example:

<Input type = "text" name = "keywordsearch" onfocus = "clearvalue ()">

Here the lower-case onfocus should be used, and the label closure symbol displayed is the standard method.

<Input type = "text" name = "keywordsearch" onfocus = "clearvalue ()"/>

 

Note: Set the tag attribute value <SCRIPT> the language and type attributes of the tag.

<SCRIPT> the language attribute of the tag is used to define the script language version. The correct value assignment should be shown in <SCRIPT> to tell the browser (mainly IE) use the Javascript Syntax of version 1.2. The type attribute is used to define the script type, which is W 3c And use lower-case attributes. In special cases, if you need to tell the browser to interpret the Protocol in a lower version of the protocol Crip language (currently, most browsers support the Javascript version 1.5), you generally do not need to define the language attribute, however, the type attribute needs to be defined. Therefore

<Script language = "JavaScript"> changed to <SCRIPT>

<A> ALT and title attributes of tags

Although the values of ALT and title are displayed in tool tip mode when you hover the mouse over ie, there is a difference between them. ALT is an alternative display when the image is not displayed, and title is the prompt when the mouse is placed on it.

<Input> tag checked and readonly attributes

In earlier versions of HTML, it is not mandatory that all attributes should be assigned a value. When displaying a selected check box, such a statement is accepted. However, according to the XHTML standard, this syntax is not a strict XML format. You should pay attention to the assignment of attributes and the closure of tags to conform to the development trend of HTML standards. It is written as follows:

<Input checked = "checked"/>

<Input readonly = "readonly"/>

<Option> select ed attribute of a tag

For the same reason as the previous one, the selected Attribute of the <option> label in the <SELECT> option should also be assigned a value:

<Option selected = "selected"/>

label align = "absmiddle" attribute

According to the XHTML standard, HTML labels should focus on the representation of content, rather than style control. styles should be handed over to CSS for adjustment. Some old labels and attributes are discarded. For example, the <em> label and <I> label make the text in the label content appear in italic, however, the <I> label, which is simply named after a style, is replaced by the <em> label that represents the meaning of emphasis. Similarly, the align = "absmiddle" attribute of the label indicates that the image is vertically aligned with the adjacent text, which also indicates the style attribute, CSS should be used instead of this attribute to control the image alignment style and avoid mutual influence between the two styles.

<IFRAME> frameborder attribute of a tag

When IFRAME is used, in IE, you may only need to set border = "0" to not display the IFRAME border, but the attribute of the border of the Standard Control Frame window is frameborder, set frameborder = "0" to hide the frame border in other browsers except ie:

<IFRAME frameborder = "0"/>

 

<Table> cellpadding attribute of a tag

This attribute is the same as the align attribute of the label. It is also an attribute that controls the style as the HTML itself represents the content. It specifies the space between units. From a practical point of view, it is best not to specify cellpadding, but to use CSS to control the cell padding.

<TD> nowrap attribute of a tag

Nowrap is an attribute that indicates that the content does not wrap automatically, but it is the same as the preceding attribute, which controls the style. In HTML 4.01, <TD> the "bgcolor", "height", "width", and "nowrap" tags are not supported. In the XHTML 1.0 strict DTD, <TD> the "bgcolor", "height", "width", and "nowrap" labels are not supported.