CSS XTHML writing standards and common problems summary (page optimization)

Project Documentation Directory
Div+CSS Naming Standards - 4 -
Div+css naming convention - 4 -
1.1. div+css naming convention - 4 -
1.2. CSS Id Naming Standards - 4 -
1.3. CSS style file naming - 5 -
XHTML Coding Basic Specifications - 6 -
XHTML Coding Basic Specifications - 6 -
Recommended Web Page Design Standards - 10 -
Recommended Web Page Design Standards - 10 -
Common CSS optimization techniques - 11 -
Summary of CSS browser compatibility issues - 20 -
JavaScript browser compatibility summary - 30 -
The impact of XHTML standard DIV+CSS layout on website SEO - 35 -

Div+CSS naming convention
Div+css naming convention
Css names are case-sensitive, and it is recommended to use all lowercase. The following summarizes the best naming guidelines. Good naming is not only easier for maintainers to read, but also has great benefits for search engine optimization (SEO). Among them, code optimization is a critical step. In order to better comply with SEO standards, the following are the currently popular CSS+DIV naming rules, with some additions:
1.1. div+css naming conventions Header:header
Login Bar: loginBar
Logo:
Sidebar: sideBar
Advertisement: banner
Navigation: nav
Sub-navigation: subNav
Menu:menu
Submenu: subMenu
Search:search
Scroll: scroll
Page body:main
Content:
Tab:tab
Article list:list
Prompt message: msg
Tips:
Column title: title
Friend Link:
Footer:footer
Join: joinus
Guide:guild
Service:
Hot spot:hot
News: news
Download:download
Registration: regsiter
Status: status
Button:btn
Vote:vote
Partner:partner
Copyright:copyRightProduct Management

1.2. CSS ID Naming Standards

Jacket: wrap
Main navigation: mainNav
Sub-navigation: subnav
Footer:footer
The entire page: content
Header:header
Footer:footer
Trademark: label
Title: title
Main navigation: mainNav(globalNav)
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsideBar
Right navigation: rightsideBar
Flag:logo
Slogan: banner
Menu content 1:menu1Content
Menu capacity: menuContainer
Submenu:submenu
Side navigation icon: sidebarIcon
Note:
BreadCrumbs: breadCrumb (i.e. navigation hint of the page location)
Container:container
Content:
Search:search
Login: login
Functional area: shop (such as shopping cart, cashier)
Current: current

1.3. CSS style file naming main: master.css
Layout: layout.css
Columns: columns.css
Text: font.css
Print style: print.css
Themes:themes.css
General: basic.css

The above naming convention is very intuitive. Even if the programmer does not add comments, we will know clearly what it means. The above naming covers almost all the frequently used styles.

XHTML coding basic specifications

XHTML coding basic specifications
2.1 All tags must have a corresponding end tag XHTML requires a strict structure, all tags must be closed. If it is a single unpaired tag, add a "/" at the end of the tag to close it. For example:
<img height="80" alt="Web Designer" src="/uploadfile/200806/17/8C162625950.gif" width="200" />

2.2 The names of all elements and attributes of tags must be lowercase. Unlike HTML, XHTML is case sensitive. <title> and <TITLE> are different tags. XHTML requires that all tag and attribute names must be lowercase. For example: <BODY> must be written as <body>. Mixing uppercase and lowercase letters is also not accepted.

2.3 All XHTML tags must be nested properly. Also because XHTML requires a strict structure, all nesting must be in order. In the past, we wrote code like this:
<p><b></p>/b> must be modified to: <p><b></b>/p>
That is to say, the nesting layers must be strictly symmetrical.

2.4 All attributes must be enclosed in quotes "" In HTML, you don't need to quote attribute values, but in XHTML, they must be quoted. For example:
<height=80> must be changed to: <height="80">
In special cases, you need to use double quotes in the attribute value. You can use ", and single quotes can be used ', for example:
<alt="say'hello'">

2.5 Encode all < and & special characters Any less than sign (<) that is not part of a tag must be encoded as <
Any greater-than sign (>) that is not part of a tag must be encoded as >
Any ampersand (&) that is not part of an entity must be encoded as &

2.6 Assign a value to all attributes
XHTML stipulates that all attributes must have a value, and those without a value must repeat themselves. For example:
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
Must be modified to:
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">

2.7 Do not use “–” in comments
"–" can only occur at the beginning and end of an XHTML comment, i.e. they are no longer valid within the content. For example, the following code is invalid:
<!–Comment here———–Comment here–>
Replace the internal dashes with equal signs or spaces.
<!–Comment here============Comment here–>
Some of the above specifications may seem strange, but all of these are to make our code have a unified and unique standard to facilitate future data reuse.

2.8 The type attribute cannot be omitted when referencing styles and scripting languages
<script language="javascript" type="text/javascript">
Note: type="text/javascript" cannot be omitted.

2.9 When writing JavaScript methods in a page, be sure to add comment symbols. This avoids errors caused by special symbols such as >, <, &&:
The contents of <script> and <style> tags must be enclosed in a CDATA section.
For example:
<script type="text/javascript">
<![CDATA[
function func(a, b)
{
if (a < b)
return true;
}
]]> </script>
Note that there is a less than sign (<) in the above script. If it is not enclosed in a CDATA section, the less than sign (<) and the following content will be mistaken for the beginning of another XHTML tag, causing some unnecessary errors.
Note that IE considers the CDATA section in the <script> tag to be illegal and will cause a script error. This problem can be solved using
JavaScript comments to avoid:
<script type="text/javascript">
/* <![CDATA[ */
function func(a, b)
{
if (a < b)
return true;
}
/* ]]> */
</script>
or
<script type="text/javascript">
// <![CDATA[
function func(a, b)
{
if (a < b)
return true;
}
// ]]>
</script>
Of course, the best approach is to place the scripts and CSS in separate files and reference them in the XHTML page.

2.10 Put all styles in style. For example: <td width="4"> </td> This does not conform to the standard.
We should write like this: <td style=”width:4px;”> </td>

2.11 The last style attribute must be followed by a semicolon

2.12 Use the id attribute instead of the name attribute.
In HTML, the name attribute can be used to identify the <a>, <applet>, <form>, <frame>, <iframe>, <img>, and <map> tags. The XHTML 1.0 Strict and XHTML 1.1 standards have removed support for the name attribute. We should use id to uniquely identify an element on a page. IDs cannot be repeated.

2.13 Handling of spaces in attribute values.
Any leading and trailing whitespace in attribute values is ignored. Multiple spaces or line breaks between words in an attribute value are treated as a single space. For example, the following two attributes have the same value:
<input value="HTML is out" />
<input value=" HTML is
out " />

2.14 Use appropriate document type declarations and namespaces.

2.15 Use the meta element to declare your content type.

2.16 When using img, add the alt attribute, which can be left blank.

2.17 When using img, the align=absmiddle attribute fails the W3C validation. As we all know, if you want to align the image and text vertically in the center, you can add the align=absmiddle attribute to the IMG tag. However, the align=absmiddle attribute fails the W3C validation [for the validation address, please check the W3C web page standard validation service address]. So, can CSS be used to replace the align=absmiddle attribute of IMG to achieve vertical centering? The answer is yes.
This can be achieved by adding vertical-align:middle; to CSS

case:
<div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />Use CSS to vertically center images and text</div><br /><br />
<div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />This is the effect without adding style</div><br /><br />
<div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />This uses align=absmiddle to align the image and text vertically</div>

2.18 Deprecated attributes and tags are not recommended. In order to better handle website compatibility issues, I recommend not using deprecated tags and attributes.

2.19 Adjust VS2005 validation standards to XHTML1.0 or higher

Remark:
Problems with the XHTML 1.0 Transitional WEB Standard The once popular HTML markup language has been officially considered obsolete, and its successor is XHTML (http://www.w3.org/MarkUp/). If your website is written in accordance with stricter XHTML rules, then the website will maintain a consistent style in different browsers. And you can assume that the appearance of your website will remain consistent across future browser upgrades. You also get consistent support across browsers, devices, and platforms.
XHTML has two main goals:
Separate the structure of the document (using XHTML markup language) from its presentation (using CSS)
· Write HTML as an XML For the first goal, W3C deleted some HTML tags and attributes, such as <font> and bgcolor, because these tags or attributes are not part of the document structure, but are only used to describe how the document should be displayed, so they should be defined in CSS files instead of HTML. Likewise, certain tagged content does not necessarily have to appear in a specific way. For example, the font size of the content in the <h1> tag may be smaller than the content in the <p> tag, depending on the definition in CSS. Of course, <h1> is generally used to display the title information of a document. Its importance should generally be higher than the content in <p>, so most browsers will display it in a larger font size.
For the second goal, XHTML will strictly adhere to the strict syntax of XML. It can be said that XHTML is the result of HTML reconstruction according to XML syntax. In other words, when you write an XHTML document, you are actually writing a specialized XML document. XML documents have a much stricter syntax than HTML, which will be discussed later in this article.
There are three versions of XHTML:
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
XHTML 1.0 Transitional contains all the tags and attributes of HTML 4.01. It is a less strict XHTML. Its purpose is to make it easier for existing HTML developers to accept and use XHTML.
XHTML 1.0 Strict is a strict version of XHTML. Developers must strictly abide by the rule of separating the structure and presentation of the document. That is to say, CSS should be used to control the display of the page instead of using tags or attributes such as <font> and bgcolor.
XHTML 1.0 Frameset is used to divide a document into several frames to display different contents. (XHTML 1.0 Transitional and Strict pages are not allowed to contain the <frameset> tag).
I will not go into more details about XHTML here. If you are interested, you can use Google or MSN Search to find a lot of relevant information or detailed introductions. You are also welcome to leave your comments and questions under this post, let us discuss together. What follows are some basic rules for writing XHTML.
Reference URL: http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html
http://www.chinaz.com/Design/Pages/10091JN2007.html

Recommended web page design standards

Recommended web page design standards
3.1 Naming conventions

File naming principles:
Use the fewest letters to achieve the easiest to understand meaning.

General file and directory naming conventions:
Each directory should contain a default html file, with the file name index.htm. File names should use a combination of lowercase English letters, numbers and underscores, and should be translated from English words as much as possible. For example: feedback (feedback), aboutus (about us). Multiple files of the same type are named with English letters plus numbers, and the letters and numbers are separated by _. For example: news_01.htm. Note that the number of digits is proportional to the number of files, and any missing digits will be padded with 0. For example, there are 200 news items, and the 18th item is named news_018.htm
Image naming conventions:
The name is divided into two parts, the first and the last, separated by an underscore.
The header part indicates the general nature of this image. For example: We name rectangular images such as advertisements and decorative patterns placed at the top of the page: banner; we name iconic images: logo; we name small images with links that are not fixed on the page as button; we name images of link columns that appear continuously at a certain position on the page and have the same nature: menu; we name decorative photos: pic; we name images without links to represent titles: title, and so on. The tail part is used to indicate the specific meaning of the picture and is expressed in English letters. For example: banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
For the images with onmouse effect, the two images are named by adding "_on" and "_off" to the end of the original file name.
Other file naming conventions:
The naming principle of js is to use English words for the functions. For example: the js file name of the advertisement banner is: ad.js
All CGI files have the suffix cgi. The configuration file for all CGI programs is config.cgi

3.2 Directory structure specification The principle of directory establishment is to provide the clearest and simplest access structure with the least number of levels.
The directory name consists of lowercase English letters and underscores. (Refer to naming conventions)
The root directory usually only stores index.htm and other necessary system files. Each major column has a corresponding independent directory. The images directory under the root directory is used to store public images used by all pages, and the images directory under the subdirectory stores private images used by the pages of this column. All JS scripts are stored in the scripts directory under the root directory. All CSS files are stored in the App_theme directory under the root directory. All flash, avi, ram, quicktime and other multimedia files are stored in the media directory under the root directory.

Common CSS optimization techniques
Common CSS optimization techniques
4.1. Use CSS abbreviations Using abbreviations can help reduce the size of your CSS files and make them easier to read. For the main rules of CSS abbreviations, please refer to "Summary of Common CSS Abbreviation Syntax", which will not be described in detail here.
Reference website: http://homepage.yesky.com/97/7643097.shtml

4.2. Explicitly define the unit, unless the value is 0
Forgetting to define the units for dimensions is a common mistake made by CSS novices. In HTML you can just write width=100, but in CSS, you have to give an exact unit, such as: width:100px width:100em. There are only two exceptions where you can leave units undefined: line height and zero value. Apart from this, all other values must be followed by the unit. Be careful not to add spaces between the value and the unit.
4.3. Case sensitivity When using CSS in XHTML, the element names defined in CSS are case sensitive. To avoid this error, I recommend using lowercase for all definition names.
The values of class and id are also case-sensitive in HTML and XHTML. If you must use mixed case, please make sure that your CSS definition is consistent with the tags in XHTML.
4.4. Cancel the element restriction before class and id When you define a class or id for an element, you can omit the preceding element restriction, because the ID is unique in a page, and the class can be used multiple times in the page. It makes no sense to limit yourself to a certain element. For example:
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
Can be written as
#content { /* declarations */ }
.details { /* declarations */ }
This saves some bytes.
4.5. Default values Usually the default value of padding is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If you are afraid of conflicts, you can define the margin and padding values of all elements to be 0 at the beginning of the style sheet, like this:
* {
margin:0;
padding:0;
}

4.6. No need to redefine inherited values
In CSS, child elements automatically inherit the attribute values of parent elements, such as color and font. Those that have been defined in the parent element can be directly inherited in the child element without the need for repeated definition. But be aware that the browser may override your definitions with some default values.
4.7. The closest priority principle If there are multiple definitions of the same element, the closest (smallest level) definition takes precedence. For example, there is such a code
Update: Lorem ipsum dolor set
In the CSS file, you have defined the element p and a class update
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
Of these two definitions, class=update will be used because class is more recent than p. You can refer to W3C's Calculating a selector's specificity for more information.
4.8. Multiple class definitions A tag can define multiple classes at the same time. For example: We first define two styles. The first style has a background of #666; the second style has a 10 px border.
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
In the page code, we can call
<div class="one two"></div>
The final display effect is that this div has both a #666 background and a 10px border. Yes, it is possible to do this, you can try it.
4.9. Using descendant selectors
One of the things that slows down CSS beginners is that they don’t know how to use child selectors. Child selectors can help you save a lot of class definitions. Let's look at the following code:
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>
The CSS definition for this code is:
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
You can replace the above code with the following
<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>
The style definition is:
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
Using child selectors can make your code and CSS more concise and easier to read.

4.10. No need to quote the background image path To save bytes, I recommend not to quote the background image path because the quotes are not required. For example:
background:url(images/***.gif) #333;
It can be written as
background:url(images/***.gif) #333;
If you add quotation marks, it will cause errors in some browsers.
4.11. Group selectors
When some element types, classes or ids have some common attributes, you can use group selectors to avoid repeated definitions. This can save quite a few bytes.
For example, to define the font, color, and margin of all titles, you can write:
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
If you need to define independent styles for individual elements during use, you can add new definitions to overwrite the old ones, for example:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
4.12. Specify link styles in the correct order When you use CSS to define multiple state styles of a link, pay attention to the order in which they are written. The correct order is: :link :visited :hover :active. The first letter drawn is LVHA, which you can remember as LoVe HAte (like hate). For more information on why this is the definition, please refer to Eric Meyer's "Link Specificity".
If your users need to use the keyboard to control and need to know the focus of the current link, you can also define the :focus attribute. The effect of the :focus attribute also depends on where you write it. If you want the focused element to show the :hover effect, you write :focus before :hover; if you want the focus effect to replace the :hover effect, you put :focus after :hover.
4.13. Clearing floats A very common CSS problem is that when positioning using floats, the underlying layer is covered by the floated layer, or the nested sublayers in the layer exceed the scope of the outer layer.
The usual solution is to add an extra element after the float, such as a div or a br, and define its style as clear: both.
4.14. Horizontal centering
This is a simple tip, but it’s worth repeating because I see so many newbie questions asking this: How do I horizontally center something with CSS? You need to define the width of the element, and define the horizontal margin if your layout is contained in a layer (container), like this:

You can define it to be horizontally centered like this:
#wrap {
width:760px; /*Change to the width of your layer*/
margin:0 auto;
}
However, IE5/Win cannot display this definition correctly. We use a very useful trick to solve it: use the text-align attribute. Like this:
body {
text-align:center;
}
#wrap {
width:760px; /*Change to the width of your layer*/
margin:0 auto;
text-align:left;
}
The first body text-align:center; rule defines that all elements of the body in IE5/Win are centered (other browsers only center the text), and the second text-align:left; aligns the text in #warp to the left.
4.15. Import and hide CSS
Because older browsers don’t support CSS, a common approach is to use the @import technique to hide CSS. For example:
@import url(main.css);
However, this method does not work for IE4, which gave me a headache for a while. Later I wrote it like this:
@import main.css;
4.16. Optimization for IE Sometimes, you need to define some special rules for IE browser bugs. There are too many CSS tricks (Hacks) here. I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, these two methods are the safest.
1. Annotation Methods
(a) To hide a CSS definition in IE, you can use a child selector:
html>body p {
/*Define content*/
}
(b) The following syntax is only understood by IE (it is hidden from other browsers)
* html p {
/* declarations */
}
(c) Sometimes, you want IE/Win to be effective but IE/Mac to be hidden. You can use the backslash trick:
/* */
* html p {
declarations
}
/* */
2. Conditional comments Another method that I think is more proven than CSS Hacks is to use Microsoft's private attribute conditional comments. Using this method you can define some styles for IE separately without affecting the definition of the main style sheet. Like this:


4.17. Debugging tips: How big are the layers?
When debugging CSS errors, you have to analyze the CSS code line by line like a typesetter. I usually define a background color on the problematic layer so it's obvious how much space the layer takes up. Some people suggest using border, which is generally acceptable, but the problem is that sometimes border will increase the size of the element, and border-top and border-bottom will destroy the value of the vertical margin, so using background is safer.
Another property that often causes problems is outline. An outline looks like a boeder, but does not affect the size or position of an element. Only a few browsers support the outline property, the only ones I know of are Safari, OmniWeb, and Opera.
4.18.CSS code writing style When writing CSS code, everyone has their own writing habits regarding indentation, line breaks, and spaces. After continuous practice, I decided to adopt the following writing style:
selector1,
selector2 {
property:value;
}
When using joint definitions, I usually put each selector on its own line so that they are easier to find in the CSS file. Put a space between the last selector and the curly brace {, and write each definition on a separate line. The semicolon goes directly after the property value without a space.
I usually put a semicolon after each attribute value. Although the rules allow you to not put a semicolon after the last attribute value, it is easy to forget to add a semicolon when adding a new style, which may cause errors, so it is better to add them all.
Finally, put the closing curly brace } on a line of its own.
Spaces and line breaks aid readability.
Recommended reading:
https://www.jb51.net/article/15758.htm
http://portal.oss.org.tw/files/95/a/a6.pdf
http://en.wikipedia.org/wiki/XHTML
http://www.w3.org/TR/2000/REC-xhtml1-20000126/
http://www.dreamdu.com/xhtml/function_xhtml11/

Summary of CSS browser compatibility issues

Summary of CSS browser compatibility
The compatibility of CSS with browsers is sometimes a headache. Perhaps when you understand the techniques and principles involved, it will not be a difficult task. We have collected and organized the compatibility processing methods for IE7, 6 and Fireofx from the Internet. For the transition to web2.0, please try to write code in xhtml format. DOCTYPE affects CSS processing. As a W3C standard, DOCTYPE declaration must be added. The following are the problems we often use or encounter in our work.
CSS Tips
5.1.Div vertical centering problem
vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert the text and it will be vertically centered. The disadvantage is that you need to control the content so that it does not wrap.
5.2. The issue of doubling margin: The margin of a div set as float will be doubled in IE. This is a bug that exists in IE6. The solution is to add display:inline; to this div.
For example: <#div id="imfloat"> The corresponding css is #IamFloat{ float:left; margin:5px;/*IE understands it as 10px*/ display:inline;/*IE understands it as 5px*/}
5.3. Double distance caused by floating ie
#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore float} Here we will elaborate on the two elements of block and inline: The characteristic of block element is that it always starts on a new line, and the height, width, line height, and margin can be controlled (block element); The characteristic of inline element is that it is on the same line with other elements and cannot be controlled (embedded element); #box{ display:block; //Can simulate block elements for inline elements display:inline; //Achieve the effect of arranging in the same line diplay:table;
5.4. Problems with IE and width and height
IE does not recognize the min- definition, but in fact it treats normal width and height as if they have min values. This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, it is equivalent to not setting width and height in IE. For example, if you want to set a background image, this width is more important. To solve this problem, you can do this: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.5. Minimum page width
min-width is a very convenient CSS command that can specify that an element cannot be less than a certain width, thus ensuring that the layout is always correct. But IE doesn't recognize this, and it actually uses width as the minimum width. To make this command work on IE, you can put a <div> under the <body> tag, assign a class to the div, and then design the CSS like this: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} The first min-width is normal; but the width of the second line uses Javascript, which is only recognized by IE, which will make your HTML document less formal. It actually implements the minimum width through Javascript judgment.
5.6. DIV floating IE text produces 3 pixel bug
The left object floats, and the right side is positioned using the left margin of the outer patch. The text in the right object will have a 3px spacing from the left. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //This sentence is the key} <div id="box"> <div id="left"></div> <div id="right"></div> </div>
5.7.IE hide-and-seek problem When the div application is complex and there are some links in each column, DIV is prone to hide-and-seek problems. Some content cannot be displayed. When you select this area with the mouse, you will find that the content is indeed on the page. Solution: Use the line-height property for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.
5.8. Close the float div; clear the float; adapt the height;
① For example: <#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >Here NOTfloatC does not want to continue to move horizontally, but wants to move down. (The properties of floatA and floatB have been set to float:left;) This code works fine in IE, but the problem lies in FF. The reason is that NOTfloatC is not a float tag, and the float tag must be closed. Add < #div class="clear"> between <#div class="floatB"> and <#div class="NOTfloatC">. Be sure to pay attention to the position of this div, and it must be at the same level as the two divs with float attributes. There cannot be a nested relationship between them, otherwise an exception will occur. And define the clear style as follows: .clear{ clear:both;}
② Do not set a fixed height for the div that serves as an external wrapper. In order to allow the height to adapt automatically, add overflow:hidden in the wrapper. When the box contains float, automatic height adaptation is invalid in IE. At this time, the layout private properties of IE should be triggered (damn IE!). This can be achieved by using zoom:1;, thus achieving compatibility. For example, a wrapper is defined as follows: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
5.9. Height Inadaptability Height inadaptability means that the height of the outer layer cannot be automatically adjusted when the height of the inner object changes, especially when the inner object uses margin or paddign. Example: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>Contents in the p object</p> </div> Solution: Add two empty div objects above and below the P object CSS code: .1{height:0px;overflow:hidden;} or add border attributes to the DIV.
5.10. Why is there a gap under the image in IE6? There are many ways to solve this BUG, such as changing the html layout, setting img to display:block, or setting the vertical-align property to vertical-align:top | bottom | middle | text-bottom.
5.11. How to align text with text input box with vertical-align:middle; <style type="text/css">  </style>
5.12. Is there any difference between id and class defined in web standards?
The web standard does not allow duplicate IDs, for example, div id="aa" cannot be repeated twice, but class defines a class, which can be repeated infinitely in theory, so it can be used by definitions that need to be referenced multiple times.
The priority of attributes: ID has a higher priority than class. See example 3 above. To facilitate JS and other client scripts, if you want to perform script operations on an object in the page, you can define an ID for it. Otherwise, you can only find it by traversing the page elements and specifying specific attributes. This is a relative waste of time and resources, and is far less simple than an ID.
5.13. How to display ellipsis in LI when the content exceeds the length. This method is applicable to IE and OP browsers. <style type="text/css">  </style>
5.14. Why can't IE set the scroll bar color in the web standard? The solution is to change body to html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style>
5.15. Why can't I define a container with a height of about 1px?
This problem in IE6 is caused by the default line height. There are many solutions, such as: overflow:hidden | zoom:0.08 | line-height:1px
5.16. How can I make the layer appear on top of the FLASH? The solution is to set the FLASH to be transparent <param name="wmode" value="transparent" />
5.17. How to vertically center a layer in the browser Here we use percentage absolute positioning and the negative value method of external patching. The size of the negative value is its own width and height divided by two.
<style type="text/css">
<!—
div
{
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
5.18. Compatible with the minimum height of each browser

5.18. The default font size in IE6 is roughly between 12 and 14px
The default font size in IE6 is roughly between 12 and 14px. When you try to define a div with a height less than this default value, IE will stubbornly believe that the height of this layer should not be less than the line height of the font. So even if you use height:4px; to define the height of a div, what is actually displayed in IE is still a layer with a height of about 12 px. Adding overflow: hidden solves the problem.
<div style="height: 4px; overflow: hidden;"></div>

FF and IE
1. Div centering problem When margin-left and margin-right are set to auto, div is already centered. IE does not work. IE needs to set body to be centered. First, define text-algin: center in the parent element; this means to center the content in the parent element.
2. Border and background of link (a tag) To add border and background color to a link, you need to set display: block and float: left to ensure that it does not wrap. Referring to menubar, setting the height for a and menubar is to avoid the bottom edge display being misaligned. If the height is not set, a space can be inserted in the menubar.
3. The hover style does not appear after the hyperlink is visited. The styles of the hyperlink that has been clicked and visited no longer have hover and active. Many people should have encountered this problem. The solution is to change the order of CSS attributes: LVHA Code: <style type="text/css">  </style>
4. Cursor finger cursor cursor: pointer can display the cursor finger in IE FF at the same time, hand only in IE
5. UL padding and margin The ul tag has a padding value by default in FF, but only the margin has a value by default in IE, so defining ul{margin:0;padding:0;} first can solve most problems
6. FORM tag This tag will automatically add some margin in IE, but in FF, the margin is 0. Therefore, if you want to display it consistently, it is best to specify the margin and padding in CSS. For the above two problems, I usually use the following style in my CSS: ul,form{margin:0;padding:0;} to define it, so I won't have a headache about it later.
7. Inconsistent interpretation of BOX model The inconsistent interpretation of BOX model in FF and IE leads to a difference of 2px. Solution: div{margin:30px!important;margin:28px;} Note that the order of these two margins must not be reversed. IE cannot recognize the important attribute, but other browsers can. So in IE it is actually interpreted like this: If div {maring:30px;margin:28px} is defined repeatedly, the last one will be executed, so you can't just write margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8. Attribute selector (this is not compatible, it is a bug of hidden css) p[id]{}div[id]{} This is hidden for IE6.0 and below, but works for FF and OPera. There is a difference between attribute selector and subselector. The scope of subselector is narrowed in form, while the scope of attribute selector is larger. For example, in p[id], all p tags with id are of the same format.
9. The most ruthless method - !important; If there is really no way to solve some detail problems, you can use this method. FF will automatically prioritize the parsing of "!important", but IE will ignore it. As shown below. tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} It is worth noting that the sentence xxxx !important must be placed above another sentence, as mentioned above
10. The default value problem of IE and FF. Maybe you have been complaining about why you have to write different CSS for IE and FF, why IE is so troublesome, and then you write CSS while cursing the damn M$ IE. In fact, in terms of CSS standard support, IE is not as damnable as we think. The key is that the default values of IE and FF are different. After mastering this technique, you will find that it is not that difficult to write CSS that is compatible with FF and IE. Maybe for simple CSS, you can completely do without "!important". We all know that when a browser displays a web page, it will decide how to display it based on the CSS style sheet of the web page. However, we may not describe all the elements in detail in the style sheet, and of course there is no need to do so. Therefore, for those attributes that are not described, the browser will use the built-in default method to display them. For example, if you do not specify the color of text in CSS, the browser will use black or system color to display it. The background of div or other elements, if not specified in CSS, the browser will set it to white or transparent, and the same is true for other undefined styles. Therefore, the fundamental reason why many things appear different in FF and IE is that their default displays are different. As for how this default style should be displayed, I don't know whether there is a corresponding standard in W3 to specify it, so don't blame IE for this.
11. Why can't the text expand the height of the container in FF? The container with a fixed height value in the standard browser will not be expanded like in IE6. How should I set it if I want a fixed height and want it to be expandable? The solution is to remove the height setting and set min-height:200px; Here, in order to take care of IE6 that does not understand min-height, it can be defined like this: { height:auto!important; height:200px; min-height:200px; }
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : If you remove the XML at the top of the container, you will find that the problem lies here. The declaration at the top triggers IE's qurks mode. For relevant knowledge about qurks mode and standards mode, please refer to: http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
13. Make IE6 support transparent PNG images. A bug in IE6 caused a lot of trouble. It doesn't support transparent PNG images.
You need to use a css filter
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
14. If you need to add style to the content in the a tag, you need to set display: block; (commonly used in navigation tags)
15. The default font size in IE6 is roughly between 12 and 14px
The default font size in IE6 is roughly between 12 and 14px. When you try to define a div with a height less than this default value, IE will stubbornly believe that the height of this layer should not be less than the line height of the font. So even if you use height:4px; to define the height of a div, what is actually displayed in IE is still a layer with a height of about 12 px. Adding overflow: hidden solves the problem.
<div style="height: 4px; overflow: hidden;"></div>

IE6, IE7, FF IE7.0 are out, and there are new problems with CSS support. With more browsers, web page compatibility is getting worse, and we are the ones who are running around to solve the compatibility problem of IE7.0. I found the following article: Now I mostly use !important to hack. The test on ie6 and firefox can display normally, but ie7 can interpret !important correctly, which will cause the page not to display as required! Below is a compatibility collection of the three browsers.
The first one is the CSS HACK method
height:20px; /*For firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/ Note the order.
This is also a CSS HACK.
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
Type 2:

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
The third method is CSS filter. The following is a classic translation from a foreign website. .
Create a new css style as follows:
#item { width: 200px; height: 200px; background: red; } Create a new div and use the CSS style defined previously: <div id="item">some text here</div> Add the lang attribute here in the body expression, which is zh in Chinese: <body lang="en"> Now define another style for the div element: *:lang(en) #item{ background:green !important; } This is done to overwrite the original CSS style with !important. Since IE7.0 does not support the :lang selector, it will not have any effect on this sentence, so the same effect is achieved under IE6.0. Unfortunately, Safari also does not support this attribute, so the following CSS style needs to be added: #item:empty { background: green !important } The :empty selector is a CSS3 specification. Although Safari does not support this specification, it will still select this element regardless of whether this element exists. Now green will appear on browsers other than IE versions. For compatibility with IE6 and FF, you can consider the previous !important. I personally prefer to use this article from: http://www.aa25.cn/504.shtml
Recommended writing:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
It feels easy to remember.

Recommended Reading
http://www.cnblogs.com/me-sa/archive/2007/12/03/980685.html#981249
http://693272.blog.163.com/blog/static/364859842008514102556309/
JavaScript browser compatibility summary

Below is some information on JavaScript compatibility in various browsers.
1. Some references
http://nexgenmedia.net/evang/iemozguide/
http://www.javascriptkit.com/domref/
Firefox extension for CSS
http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
Information about CSS3, can test the current browser's support for CSS3 online
http://www.css3.info
2. The recommended js debugging tool is the firebug plug-in for Firefox, which can set breakpoints for js execution, modify css styles during runtime, view dom models, etc.
3. Open all js warnings in firefox:
Type in the address bar: about:config
Double-click and set the javascript option restict to true. You can see many warnings, which is helpful for error correction.
4. Things to note when using javascript△ document.all("id") -> document.getElementById("id")
And try to use id instead of name to identify the control:
If the control has only a name but no id, use getElementById:
IE: You can also find objects
FF: Returns NULL
△ How to get an element in the form
elForm.elements['name'];
△ When taking collection elements, ie supports two ways of writing: [] and (), but ff only supports [], such as:
table.rows(5).cells(0)
Change to:
table.rows[5].cells[0]
△ The method to determine whether an object is an object should be
if( typeof object variable == "object")
Instead of if(object variable == "[object]")
△ eval(object name) -> document.getElementById
FF supports eval function△ Directly call the object through id object id.value = ""
Change to
document.getElementById("name").value = ""
△ obj.insertAdjacentElement("beforeBegin",objText);
Use
obj.parentNode.insertBefore(objText,obj);

△ FF's createElement does not support HTML code using document.write(esHTML);
Or set the attributes after creating the element. For input elements, you need to set the type first and then add it to the DOM.
var obj = createElement("input");
obj.type = "checkbox";
var obj2 = document.getElementById("id2");
obj2.parentNode.insertBefore(obj,obj2);
If you are inserting HTML code directly, you can consider using
createContextualFragment

△ innerText -> textContent
△ The $ in the object name is not recognized, it is recommended to change it to _
objName = "t1$spin"
Change to
objName = "t1_spin"
△ In FF, I set Attribute to an object, and then retrieved it. Are the attributes of the object lost?
objText.setAttribute("obj",obj);
alert(obj.id) //correct name
obj = objText.getAttribute("obj");
alert(obj.id) //null
There is no problem in IE. For setAttribute in FF, the second parameter is always a string type!!!
So if the second parameter is an object, it is equivalent to calling the toString() method of the object. The solution is to use the following calling method:
objText.dropdown_select = obj;
obj = objText.dropdown_select

△ className -> class
Use class in FF instead of className in IE
Since class is a keyword, you need to use setAttribute/getAttribute
setAttribute("class","css style name");
△ The attributes defined in HTML must be used with getAttribute
<td id="TD1" isOBJ="true">
When getting:
document.getElementByID("TD1").isOBJ always returns undefined, but it works in IE. You should use:
document.getElementByID("TD1").getAttribute("isOBJ")

△ The select control in FF is no longer always displayed at the top, so you may need to set the zIndex of the control
The way to cover the select control in IE is to use ifame
△ For if (vars == undefined) the following values are used to determine if they are equivalent
undefined
null
false
0

△ If FF calls obj.focus(); and an error occurs, try changing it to:
window.setTimeout( function(){ obj.focus(); }, 20);

△ In FF, keyCode is read-only. How to convert carriage return to tab? How to convert key value when entering?
The workaround is:
1. Enter jump -> write your own jump processing code.
Traverse all elements in the DOM, find the next element that can set the focus of the current element, and set the focus to it
2. In the controls that can be entered,
Replace the selected part with the newly entered content: var text = String.fromCharCode(event.keyCode);
To prevent key events from being uploaded, call: event.preventDefault()

△ <button> will be interpreted by Firefox as submitting the form or refreshing the page???
Need to write standard <button type="button">
Or in onclick="original function call(); return false;"

△ In Firefox, document.onfocus cannot get the control that actually gets the focus?
Why does document.keydown work?
△ children -> childNodes
△ style.pixelHeight -> style.height
△ Determine whether a function or variable exists
if (!("varName" in window)) var VarName = 1;

document.body.clientWidth
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
If the html contains the above statement, it should be obtained using the following method
document.documentElement.clientWidth
△ window.createPopup
FF does not support document.body.onresize
FF does not support using window.onresize
Note that the onresize event is not triggered when the page is opened? It needs to be called once in onload. △ Box model problem
The default setting in IE is content-box. For unification, you can set it as follows:
div, td {-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
It can also be added to the document header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
But it has a greater impact on IE old code△ Registration event
IE: attachEvent
FF: addEventListener("blur", myBlur, false);
The first parameter event name does not need to contain "on"
The third parameter false means that the event is passed from the event object along the DOM tree to the body.

Trigger event
IE: obj.fireEvent("onclick");
FF:
var e = document.createEvent("Events");
e.initEvent("click", true, false);
element.dispatchEvent(event)
△ Get the object handle in the event processing function
var oThis = this;
obj.onfocus = function(evt){
oThis.doOnFocus(evt);
}
△ Unified event processing framework code
doOnFocus(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
// Subsequent processing
}

△ FF does not support onpropertychange event, but you can define the setter method of the property in FF, as follows:
HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){
//Construct a virtual event object
var evt = [];
evt["target"] = this;
evt["propertyName"] = 'readOnly'
//The onpropertychange function needs to define the evt parameter, refer to the unified event processing framework code
if (this.onpropertychange) this.onpropertychange(evt);
});

5.IE -> firefox css class △ cursor:hand -> cursor:pointer
△ expression Firefox does not support it. Expression also consumes a lot of CPU in IE, so it should not be used!!
In order to achieve better results, you should create your own expression to javascript processing function so that it can be used in both IE and FF.
△ FILTER Firefox does not support
filter: Alpha(Opacity=50);
Replace with
-moz-opacity: 0.5;
△ text-overflow
Does not support △ transparent
In Firefox, obj.setAttribute("bgColor","#ffffff") only supports color, so you must use obj.style.backgroundColor = "transparent" △ The height of the text control in FF is different from that in IE, let's unify it
input[type=text] {
height:20px;
}
Note that there should be no space between input and [!
△ Font does not work on body and td in IE, but FF can use font-family uniformly
6. Twenty-three differences between CSS and JavaScript in IE and Firefox
http://hi.baidu.com/xg21/blog/item/fbc87c3d624881e93c6d977e.html

7. Misunderstandings and differences between Javascript and CSS in IE and Firefox
http://hi.baidu.com/leiting084/blog/item/60dcac6e1decf4dd81cb4a5d.html

8. Write text
function CompatibleInnerText(id,text)
{
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById(id).innerText = text;
}
else
{
document.getElementById(id).textContent = text;
}
}
The impact of XHTML standard DIV+CSS layout on website SEO
The impact of xml standard div+css layout on website SEO
7.1 Code simplification Use DIV+CSS layout to simplify page code. I believe everyone who knows something about XHTML knows this. There are two direct benefits brought by code simplification: one is to improve the efficiency of spider crawling, so that the entire page can be crawled in the shortest time, which is beneficial to the quality of collection; the other is that because of the efficient crawling, it will be liked by spiders, which is beneficial to the number of collections.
7.2 Nested table issues Many SEOers stated in their articles that search engines generally do not crawl tables that are nested more than three levels deep. When spiders crawl pages with table layouts and encounter multiple levels of nested tables, they will skip the nested content or directly abandon the entire page.
When using Table layout, in order to achieve a certain visual effect, you have to apply multiple tables. If the nested table contains the core content, the spider will skip this section and fail to capture the core of the page when crawling, and the page will become a similar page. Too many similar pages on a website will affect rankings and domain trust.
The DIV+CSS layout basically does not have such a problem. From a technical point of view, XHTML does not require excessive nesting when controlling styles.

7.3 Speed issue DIV+CSS layout reduces page code compared to Table layout and greatly improves loading speed, which is very beneficial when spider crawling. Too much page code may cause crawling timeout, and the spider will think that the page is inaccessible, affecting the inclusion and weighting.
On the other hand, a true SEOer does not just pursue inclusion and ranking. A fast response speed is the basis for improving user experience, which is very beneficial to the entire search engine optimization and marketing.
7.4 Impact on rankings The DIV+CSS layout based on the XTHML standard is usually perfected as much as possible after the design is completed so that it can pass W3C verification. So far, no search engine has stated that its ranking rules will favor websites or pages that comply with W3C standards, but it has been proven that websites that use the XTHML architecture generally rank well. This may be controversial, but Le Sishu himself holds this view. Those who disagree can compare and observe three or more groups of websites of basically the same quality.
I think this situation may not be a ranking rule. The most likely possibility is that the above differences occur when the spider crawls the website, resulting in different collection quality.
After all, something is better than nothing. Friends who are building or revising a website are advised to choose DIV+CSS layout if the technology permits.
I have been working for a long time. This is a white paper I wrote and compiled during the company training last year. I hope everyone can give me more suggestions. Thanks!

<<: Detailed explanation of CSS style cascading rules

>>: Introduction to the use of several special attribute tags in HTML

CSS XTHML writing standards and common problems summary (page optimization)

Native js to realize bouncing ball

Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux

How to quickly install nginx under Windows and configure it to start automatically

How to use iframe to apply the data of other web pages while maintaining compatibility

VMware configuration VMnet8 network method steps

The implementation principle of Zabbix dynamic execution monitoring collection script

Navicat imports csv data into mysql

jQuery custom magnifying glass effect

Detailed explanation of Vue mixin usage and option merging

Detailed explanation of how CocosCreator system events are generated and triggered

Recommend

Discussion on the problem of iframe node initialization

How to build a private Docker repository using Harbor

Using vue3 to implement counting function component encapsulation example

Understanding of the synchronous or asynchronous problem of setState in React

Detailed explanation of keepAlive use cases in Vue

A brief discussion on DDL and DML in MySQL

The basic principles and detailed usage of viewport

Getting Started Tutorial for Beginners: Domain Name Resolution and Binding

Detailed explanation of VUE Token's invalidation process

Detailed explanation of MySQL view management view example [add, delete, modify and query operations]

How to create a Pod in Kubernetes

Pure CSS code to achieve drag effect

Commonly used English fonts for web page creation

HTML table tag tutorial (25): vertical alignment attribute VALIGN

Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps