Shulou(Shulou.com)06/03 Report--

This article mainly introduces the writing specifications of CSS and XTHML and what are the common questions. The article is very detailed and has certain reference value. Friends who are interested must read it!

Project documentation directory

Div+CSS naming Convention-4-

Div+css naming Convention-4-

1.1. Div+css naming Convention-4-

1.2. CSS Id naming convention-4-

1.3. Css style file naming-5-

XHTML coding basic specification-6-

XHTML coding basic specification-6-

Recommended web page production specifications-10-

Recommended web page production specifications-10-

Common optimization techniques for Css-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

The naming of Css is case-sensitive, so it is recommended to use all lowercase. Here's a summary of the best naming guidelines. Good naming is not only good for maintainers to read, but also good for search engine optimization (seo). Among them, the optimization of the code is a key step. In order to be more in line with the SEO specification, the following is a popular naming convention for CSS+DIV, and some additions have been made:

1.1. Div+css naming convention

Header: header

Login bar: loginBar

Logo: logo

Sidebar: sideBar

Advertisement: banner

Navigation: nav

Subnavigation: subNav

Menu: menu

Submenu: subMenu

Search: search

Scroll: scroll

Page body: main

Content: content

Tag page: tab

List of articles: list

Tip: msg

Tip: tips

Column title: title

Link: friendLink

Footer: footer

Join: joinus

Guide: guild

Service: service

Hot spot: hot

News: news

Download: download

Registration: regsiter

Status: status

Button: btn

Voting: vote

Partner: partner

Copyright: copyRight product management

1.2. Id naming convention for CSS

Coat: wrap

Main navigation: mainNav

Subnavigation: subnav

Footer: footer

Entire page: content

Header: header

Footer: footer

Trademark: label

Title: title

Main navigation: mainNav (globalNav)

Top navigation: topnav

Edge navigation: sidebar

Left navigation: leftsideBar

Navigation on the right: rightsideBar

Flag: logo

Slogan: banner

Menu content 1:menu1Content

Menu capacity: menuContainer

Submenu: submenu

Edge navigation icon: sidebarIcon

Note: note

Bread crumbs: breadCrumb (navigation prompt for the location of the page)

Container: container

Content: 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

Column: columns.css

Text: font.css

Plot style: print.css

Topic: themes.css

Generic: basic.css

The above naming convention is very intuitive, even if the programmer does not add comments, we will know exactly what it means. The above naming covers almost all the styles that are often used.

Basic specification of XHTML coding

Basic specification of XHTML coding

2.1 all tags must have a corresponding closing tag

XHTML requires a strict structure and all tags must be closed. If it is a separate and unpaired tag, add a "/" at the end of the tag to close it. For example:

2.2 all tag element and attribute names must be lowercase

Unlike HTML, XHTML is case-sensitive and has different tags. XHTML requires that all tags and attribute names be lowercase. For example, it must be written. Mixed case is also not recognized.

2.3 all XHTML tags must be properly nested

Also because XHTML requires strict structure, all nesting must be in order, as we wrote before:

/ b > must be modified to:

/ p >

That is, the nesting of one layer must be strictly symmetrical.

2.4 all attributes must be enclosed in quotation marks

In HTML, you don't need to quote attribute values, but in XHTML, they must be in quotation marks. For example:

Must be modified to:

In special cases, you need to use double quotation marks in attribute values, you can use ", single quotation marks can use & apos;, for example:

2.5 put all

Any ampersand (&) that is not part of an entity must be encoded as &

2.6 assign a value to all attributes

XHTML states that all attributes must have a value, and repeat themselves if there is no value. For example:

Must be modified to:

2.7 do not use "-" in the comments

"-" can only occur at the beginning and end of XHTML comments, that is, they are no longer valid in the content. For example, the following code is invalid:

Replace the inner dotted line with an equal sign or a space.

Some of the above specifications seem strange, but all of this is to make our code have a unified and unique standard to facilitate the reuse of data in the future.

2.8The type attribute cannot be omitted when referencing styles and scripting languages

Note: type= "text/javascript" cannot be omitted.

2.9 pay attention to adding annotation symbols when writing javascript methods on the page. This avoids >

Notice the less than sign () in the Script above

/ /

Of course, the best way is to put the script and CSS in a separate file and add references to the XHTML page.

2.10 put all styles in style

Ex.: this writing is not up to the standard.

We should write like this:

2.11 style attributes 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 identify

And markings. XHTML 1.0 Strict and XHTML 1.1 standards have removed support for the name attribute. We should use id to uniquely identify the elements on a page. ID cannot be repeated.

2.13 handling of spaces in attribute values.

All spaces at the beginning and end of the property value are ignored. Multiple spaces or newline characters between words in an attribute value are considered as a single space. For example

The following two properties have the same values:

2.14 use appropriate document type declarations and namespaces.

2.15 use the meta element to declare your content type.

2.16 add the alt attribute when using img, which can be set to empty

2.17 when using img, the align=absmiddle attribute cannot pass under W3C verification.

As we all know, if you want to align the picture and text vertically, you can add the align=absmiddle attribute under the IMG tag, but the align=absmiddle attribute can not pass under W3C verification, so whether you can use CSS instead of IMG's align=absmiddle attribute to achieve vertical alignment? the answer is yes.

It can be realized by adding vertical-align:middle; to CSS.

Examples:

Using CSS to realize the vertical alignment of pictures and text

This is an unstyled effect.

This is to use align=absmiddle to realize the vertical alignment of pictures and text.

2.18 outdated attributes and tags are not recommended

In order to better deal with website compatibility issues, I recommend that you do not use outdated tags and attributes

2.19 adjust the verification standard of VS2005 to XHTML1.0 or later

Note:

Problems caused by the XHTML 1.0 Transitional WEB standard

The once popular HTML markup language has been officially considered obsolete and will be replaced by XHTML (http://www.w3.org/MarkUp/)). If your site is written according to more stringent XHTML rules, the site will maintain a consistent style in different browsers. And you can think that the appearance of the site will still be consistent in future browser version upgrades. You will also get consistent support across browsers, devices, and platforms.

XHTML has the following two main goals:

Separate the structure of the document (using XHTML markup language) from the presentation (using CSS)

Write HTML as a XML

For the first goal, the W3C removed some HTML tags and attributes, such as 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 the CSS file rather than in the HTML. Similarly, some specific markup content does not have to be displayed as a specific appearance. For example, the font size of the content in the tag may be less than

It depends on the definition in CSS. Of course, it is generally used to display the title information of a document, which should also be more important than

So most browsers will display it in a larger font size.

For the second goal, XHTML will strictly follow the strict syntax of XML. It can be said that XHTML is the result of HTML refactoring according to XML syntax. In other words, when you write a XHTML document, you are actually writing a specialized XML document. XML documents have 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, which contains all the tags and attributes of HTML4.01, is a less strict XHTML designed to make it easier for existing HTML developers to accept and use XHTML.

XHTML 1.0 Strict is a strict version of XHTML, and developers must strictly follow the rule that the structure of the document is separated from the presentation, that is, you need to use CSS to control the display of the page instead of using tags or attributes such as bgcolor.

XHTML 1.0 Frameset is used to divide a document into several frames to display different content. (XHTML 1.0 Transitional and Strict pages are not allowed to contain tags).

I won't 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 details. You are also welcome to leave your comments and questions under this post, let's discuss it together. Here are some basic rules for writing XHTML.

Reference website: http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html

Https://cache.yisu.com/upload/information/20210311/298/10251.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 pictures with onmouse effect, add "_ on" and "_ off" to the original file name respectively.

Other file naming conventions:

The naming principle of js is named after functional English words. For example, the js file name of the advertisement is: ad.js

All CGI files are suffixed with cgi. The configuration file for all CGI programs is config.cgi

3.2 Directory structure specification

The principle of directory establishment: provide the clearest and easiest access structure with the least level.

The name of the directory consists of lowercase letters and underscores. (refer to naming convention)

The root directory generally stores only index.htm and other necessary system files

Set up a corresponding independent catalog for each main column

The images under the root directory is used to store the public pictures used by each page, and the images directory under the subdirectory stores the private pictures 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 optimization techniques in Css

Common optimization techniques in CSS

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, see "Summary of commonly used css acronym Grammar", which is not described here.

Reference website: http://homepage.yesky.com/97/7643097.shtml

4.2. Clearly defined units, unless the value is 0

Forgetting to define the unit of size is a common mistake for beginners in CSS. In HTML you can only write width=100, but in CSS, you have to give an exact unit, such as width:100px width:100em. There are only two exceptions that do not define units: the row height and the 0 value. In addition, all other values must follow the units, and be careful not to add spaces between the values and the units.

4.3. Case sensitive

When using element names defined in CSS,CSS in XHTML, they are case-sensitive. To avoid this error, I recommend that all definition names be lowercase.

The values of class and id are also case-sensitive in HTML and XHTML. If you must mix case, please make sure that your definition in CSS is consistent with the tag in XHTML.

4.4. Unqualify elements before class and id

When you define class or id for an element, you can omit the previous element qualification, because ID is unique on a page and class can be used multiple times on the page. It makes no sense for you to define an element. For example:

Div#content {/ * declarations * /}

Fieldset.details {/ * declarations * /}

It can be written as

# content {/ * declarations * /}

.details {/ * declarations * /}

This saves some bytes.

4.5. Default value

Usually, the default value of padding is 0, and the default value of color is transparent. However, the default values may vary from browser to browser. If you are afraid of conflicts, you can define all elements with margin and padding values of 0 at the beginning of the stylesheet, like this:

* {

Margin:0

Padding:0

}

4.6. There is no need to repeatedly define inheritable values

In CSS, the child element automatically inherits the attribute values of the parent element, such as color, font, etc., which have been defined in the parent element and can be inherited directly in the child element without repeated definition. Note, however, that browsers may override your definition with some default values.

4.7. Principle of nearest priority

If there are multiple definitions of the same element, the closest definition (at the smallest level) is the first priority, for example, there is a piece of 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 closer than p. You can check out the W3C's "Calculating a selector's specificity" for more information.

4.8. Multiple class definition

A tag can define multiple class at the same time. For example, let's first define two styles, the first with a background of # 666, and the second with a border of 10 px.

.one {width:200px;background:#666;}

.two {border:10px solid # F00;}

In the page code, we can call

The final result is that the div has both a background of # 666 and a frame of 10px. Yes, it's OK to do this. You can try it.

4.9. Use a sub-selector (descendant selectors)

CSS beginners do not know that the use of sub-selectors is one of the factors affecting their efficiency. Sub-selectors can help you save a lot of class definitions. Let's look at the following code:

Item 1 >

Item 1

Item 1

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 methods

Item 1

Item 1

Item 1

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 sub-selectors can make your code and CSS more concise and easier to read.

4.10. There is no need to quote the path of the background picture.

In order to save bytes, I do not recommend putting quotation marks on the background image path, because quotation marks are not required. For example:

Background:url (images/***.gif) # 333

Can be written as

Background:url (images/***.gif) # 333

If you add quotation marks, it will cause some browser errors.

4.11. Group selector (Group selectors)

When some element types, class, or id all have some attributes in common, you can use the group selector to avoid repeated definitions. This can save a lot of bytes.

For example: define the font, color and margin of all headings. You can write like this:

H2,h3,h4,h5,h6,h7 {

Font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif

Color:#333

Margin:1em 0

}

If there are individual elements that need to define a separate style when using it, you can add a new definition to overwrite the old definition, such as:

H2 {font-size:2em;}

H3 {font-size:1.6em;}

4.12. Specify the style of the link in the correct order

When you use CSS to define multiple state styles for links, pay attention to the order in which they are written. The correct order is:: link: visited: hover: active. The first letter extracted is LVHA, which you can remember as LoVe HAte. Why is it so defined? you can refer to Eric Meyer's "Link Specificity".

If your users need to use the keyboard to control, you need to know the focus of the current link, you can also define: focus attribute. The effect of the focus attribute also depends on where you write, if you want the focus element to show: hover effect, you write: focus in front of: hover; if you want focus effect to replace: hover effect, you put: focus after: hover.

4.13. Clear float

A very common CSS problem is that when floats are used, the lower layer is covered by the floating layer, or the sublayers nested in the layer are beyond the outer layer.

The usual solution is to add an extra element, such as a div or a br, after the floating layer, and define its style as clear: both.

4.14. Horizontal Center (centering)

It's a simple technique, but it's worth repeating, because I've seen too many novice questions asking this: how does CSS center horizontally? 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 center horizontally:

# wrap {

Width:760px; / * change to the width of your layer * /

Margin:0 auto

}

But IE5/Win doesn't display this definition correctly, so we use a very useful technique to solve it: use the text-align attribute. It's 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's text-align:center; rule defines that all elements of body in the IE5/Win are centered (other browsers just center the text), and the second text-align:left; places the text in # warp to the left.

4.15. Import (Import) and hide CSS

Because older browsers don't support CSS, a common practice is to use the @ import technique to hide CSS. For example:

@ import url (main.css)

However, this method didn't work for IE4, which gave me a headache for a while. Later I wrote it in this way:

@ import main.css

4.16. Optimization for IE

Sometimes you need to define some special rules for the bug of IE browsers. There are too many CSS techniques (Hacks). I only use two of them, regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version.

1. The method of annotation

(a) hide a CSS definition in IE. You can use the child selector:

Html > body p {

/ * define content * /

}

(B) the following writing can only be understood by IE browsers (hidden from other browsers)

* html p {

/ * declarations * /

}

(C) there are also times when you want IE/Win to work and IE/Mac to hide, you can use the backslash technique:

/ * /

* html p {

Declarations

}

/ * /

two。 Method of conditional comments (conditional comments)

Another approach, which I think can stand the test more than CSS Hacks, is to use Microsoft's Private property condition Annotation (conditional comments). In this way you can define individual styles for IE without affecting the definition of the main stylesheet. It's like this:

4.17. Debugging skills: how big is the layer?

When an error occurs in debugging CSS, you have to analyze the CSS code line by line, like a typesetter. I usually define a background color on the layer where there is a problem so that I can clearly see how much space the layer takes up. Some people suggest border, which is generally fine, but the problem is that sometimes border increases the size of the element, and border-top and boeder-bottom break the value of vertical margin, so it's safer to use background.

Another attribute that often goes wrong is outline. Outline looks like boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute, and all I know is Safari, OmniWeb, and Opera.

4.18.CSS code writing style

When writing CSS code, everyone has their own writing habits for indentation, line breaks, and spaces. After continuous practice, I decided to adopt the following writing style:

Selector1

Selector2 {

Property:value

}

When using federated definitions, I usually write a separate line for each selector so that it is easy to find them in the CSS file. Add a space between the last selector and the curly braces {, each definition is written on a separate line, the semicolon directly after the attribute value, do not add a space.

I am used to adding a semicolon after each attribute value, although the rule allows you not to write a semicolon after the last attribute value, but if you want to add a new style, it is easy to forget to add the semicolon and cause errors, so it is better to add both.

Finally, the closed curly braces} write a separate line.

Spaces and line breaks help with reading.

Recommended reading:

Https://www.yisu.com/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 compatibility with browsers

The compatibility of CSS with browsers is sometimes a headache. Maybe when you understand the techniques and principles, you will not find it difficult. You have collected the compatibility treatment methods of IE7,6 and Fireofx from the Internet and sorted them out. For excessive web2.0, please try to write code in xhtml format, and DOCTYPE affects CSS processing. As a W3C standard, DOCTYPE must be added. The following are the problems we often use or encounter in our work.

CSS skills

The problem of vertical centering of 5.1.div

Vertical-align:middle; increases the line spacing to the same height as the entire DIV line-height:200px; and then inserts the text, which is centered vertically. The disadvantage is to control the content and not to change the line.

The problem of doubling 5.2.margin

Div set to float doubles the margin set under ie. This is a bug where all ie6 exists. The solution is to add display:inline to the div

For example, the corresponding css is # IamFloat {float:left; margin:5px;/*IE is understood as 10px*/ display:inline;/*IE and then 5px*/}

5.3. Double distance generated by floating ie

# box {float:left; width:100px; margin:0 00 100px; / / in this case IE will generate 200px distance display:inline; / / cause floating to ignore} here talk about block and inline in detail: block element is characterized by always starting on a new line, height, width, line height, margin can be controlled (block element); the characteristic of Inline element is that it is on the same line as other elements and cannot be controlled (embedded element) # box {display:block; / / can simulate embedded elements as block elements display:inline; / / to achieve the effect of arranging on the same line diplay:table

5.4.IE and width and height problems

IE doesn't recognize the definition of min-, but in fact it treats normal width and height as if there were min. This is a big problem. If you only use width and height, these two values will not change in normal browsers. If you only use min-width and min-height, the width and height will not be set under IE at all. For example, to set the background picture, this width is more important. To solve this problem, you can go like this: # box {width: 80px; height: 35px;} html > body # box {width: auto; height: auto; min-width: 80px; min-height: 35px;}

5.5. The minimum width of the page

Min-width is a very convenient CSS command that specifies that the element must not be less than a certain width, so that typesetting 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 one under the tag, specify a class for div, and then CSS designs it like this: # container {min-width: 600px; width:_expression (document.body.clientWidth

< 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 5.6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} 5.7.IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。 5.8.float的div闭合;清除浮动;自适应高度; ① 例如：这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 之间加上 < #div class="clear">

This div must pay attention to the location and must be at the same level as two div with float attributes, and there must be no nesting relationship between them, otherwise an exception will be generated. And define the style of clear as follows: .clear {clear:both;}

② as the div of the external wrapper, do not fix the height. In order to allow the height to adapt automatically, add overflow:hidden; to the wrapper. When the box of float is included, the highly automatic adaptation is invalid under IE. At this time, the layout private attribute of IE should be triggered (evil IE!) This can be done with zoom:1;, so compatibility is achieved. For example, a wrapper is defined as follows: .colwrapper {overflow:hidden; zoom:1; margin:5px auto;}

③ for typesetting, the css description we use most often is probably float:left. Sometimes we need to make a uniform background behind the float div in column n, for example, we need to set the background of page to blue, so as to achieve the goal that the background color of all three columns is blue, but we will find that as the left center right is lengthened downward, while the height of page remains the same, the problem comes because page is not a float attribute, and our page cannot be set to float because it is centered. So we should solve this problem by embedding another float left and the width of the DIV is 100%.

④ Universal float closure (very important!) For the principle of clear float, please see [How To Clear Floats Without Structural Markup]. Add the following code to Global CSS and add class= "clearfix" to the div that needs to be closed. / * Clear Fix * / .clearfix: after {content: "."; display:block; height:0; clear:both; visibility:hidden;} .clearfix {display:inline-block;} / * Hide from IE Mac * / .clearfix {display:block;} / * End hide from IE Mac * / / * end of clearfix * / or set: .hackbox {display:table; / / displays the object as a table at the block element level}

5.9. Highly inadaptable

Height inadaptability is that the outer height cannot be adjusted automatically 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

The contents of the p object

Solution: add 2 empty div object CSS codes above and below the P object:. 1 {height:0px;overflow:hidden;} or add the border attribute to the DIV.

5.10. Why is there a gap under the picture in IE6?

There are many ways to solve this BUG, such as changing the typesetting of html, setting img to display:block or setting the vertical-align attribute to vertical-align:top | bottom | middle | text-bottom.

5.11. How to align text with text input boxes

Plus vertical-align:middle

What is the difference between id and class defined in the 5.12.web standard?

Repeating ID is not allowed in web standard, for example, div id= "aa" does not allow repeating twice, while class defines a class, which can be repeated infinitely in theory, so that a definition that requires multiple references can be used.

Priority of attributes ID takes precedence over class, as shown in example 3 above. Convenient client script such as JS, if you want to script an object in the page, you can define an ID for it, otherwise you can only find it by traversing the page element and specifying specific attributes, which is a relatively waste of time and resources, far less simple than an ID.

5.13. The method of displaying the content in LI with ellipsis after exceeding the length

This method is suitable for IE and OP browsers.

5.14. Why can't IE set scroll bar color in web standard?

The solution is to replace body with html

5.15. Why can't you define a container about the height of 1px?

This problem is caused by the default line height in IE6, and there are many solutions, for example: overflow:hidden | zoom:0.08 | line-height:1px

5.16. How can we make the layer appear on the FLASH?

The solution is to set transparency for FLASH

5.17. How to center a layer vertically in the browser

Here we use the method of absolute positioning of the percentage and the negative value of the external patch, and the size of the negative value is its own width and height divided by two.

5.18. Compatible with the minimum height in each browser

5.18. The default font size under IE6 is about 12-14px.

The default font size under IE6 is about 12-14px. When you try to define a div whose height is less than this default, 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 a height of div, what is actually displayed under IE is a layer with a height of about 12 px. Add overflow: hidden to resolve the problem.

FF and IE

1.Div centering problem div sets margin-left when margin-right is auto, IE is not allowed, IE needs to set body to center, first define text-algin: center; in the parent element, which means that the content in the parent element is centered.

two。 The border of the link (a tag) and the background a link plus a border and background color, you need to set display: block, and set float: left to ensure no line wrapping. With reference to menubar, the height of an and menubar is set to avoid misalignment of the bottom edge. if you do not set height, you can insert a space in the menubar.

3. The problem that the hover style does not appear after the hyperlink is accessed. The hyperlink style that has been accessed no longer has hover and active. Many people should have encountered this problem. The solution is to change the order of the CSS attributes: L-V-H-A Code:

4. Cursor finger cursor cursor: pointer can display cursor finger shape in IE FF at the same time, hand only IE can

5.UL 's padding and margin ul tags have padding values by default in FF, while only margin has default values in IE, so defining ul {margin:0;padding:0;} first can solve most of the problems.

6. FORM tag this tag in IE, will automatically margin some margins, and in FF margin is 0, therefore, if you want to display consistent, so it is best to specify margin and padding in css, for the above two problems, my css generally first use this style ul,form {margin:0;padding:0;} to define dead, so later will not have a headache for this.

7. Inconsistent interpretation of BOX models in FF and IE BOX model interpretation inconsistencies lead to differences in 2px solutions: div {marginal margin 30px important importance margin 28px;} Note that the order of the two margin must not be reversed, the attribute IE of important cannot be recognized, but other browsers can. So under IE, it is actually interpreted as follows: div {maring:30px;margin:28px} if the definition is repeated, it should be executed according to the last one, so you can't just write margin:xx pxdye importance; # box {width:600px; / / for ie6.0- w\ idth:500px; / / for ff+ie6.0} # box {widthmaring:30px;margin:28px 600pxcharacters / / for ff width:600px; / / for ff+ie6.0 width / * /: 500px; / / for ie6.0-}

8. Property selector (this is not compatible, is a bug for hiding css) p [id] {} div [id] {} this is hidden for both IE6.0 and IE6.0 versions below, FF and OPera. There is a difference between attribute selector and sub-selector, the scope of sub-selector is narrowed in terms of form, and the scope of attribute selector is larger, such as p [id], all p tags with id are the same.

9. The most ruthless means -! important; can use this method if there is no way to solve some details. FF will automatically give priority to parsing "! important", but IE will ignore it. 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 on top of another sentence, which has been mentioned above.

10. The default value of IE css FF maybe you have been complaining about why you should write different CSS for IE and FF, and why IE is such a headache, and then curse that damned M $IE while writing css. In fact, for the standard support of css, IE is not as abhorrent as we thought. The key is that the default values of IE and FF are not the same. Mastering this technique, you will find that it is not so difficult to write a css compatible with FF and IE. Maybe for a simple css, you don't have to use "! important" at all. As we all know, when displaying a web page, the browser will decide how to display it according to the css stylesheet of the web page, but we may not have a specific description of all the elements in the stylesheet, and it is certainly not necessary to do so, so for those properties that do not have a description, the browser will display them by built-in default, such as text, if you do not specify a color in css Then the browser will use black or system color to display the background of div or other elements, and if it is not specified in css, the browser will set it to white or transparent, and so on. So there are a lot of things FF and IE display is different because their default display is not the same, and how to display this default style I know whether there is a corresponding standard in w3 to stipulate, so don't blame IE for this.

11. Why can't the text under FF open the height of the container? in the standard browser, the container with a fixed height value will not be opened as in IE6, then I want to fix the height, and how do I want to be able to be opened? The way to do this is to remove the height and set the min-height:200px;. Here, in order to take care of the IE6 that doesn't know min-height, it can be defined as: {heightmin-height autoimportance; height:200px; min-height:200px;}.

twelve。 Why is the width of the container under IE6 different from the interpretation of FF? the difference between firefox and IE compatibility lies in whether the width of the border is included in the overall width of the container, where IE6 is interpreted as 200PX and FF is interpreted as 220PX. How on earth caused the problem? If you remove the xml from the top of the container, you will find that this is the original problem. The statement at the top triggered IE's qurks mode. For more information 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 PNG transparency

An IE6 Bug caused a lot of trouble because it did not 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. To style the contents of the a tag

To style the content in a tag, you need to set display: block; (common in navigation tags)

15. The default font size under IE6 is roughly between 12 and 14px.

The default font size under IE6 is about 12-14px. When you try to define a div whose height is less than this default, 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 a height of div, what is actually displayed under IE is a layer with a height of about 12 px. Add overflow: hidden to resolve the problem.

IE6,IE7,FF IE7.0 has come out, and there are new problems with support for CSS. More browsers, web page compatibility is even worse, we are still exhausted, in order to solve the IE7.0 compatibility problem, found the following article: now I mostly use! important to hack, for ie6 and firefox tests can be displayed normally, but ie7! important can be correctly explained, will cause the page not to display as required! The following is a collection of compatibility for the three browsers.

The first is CSS HACK's method.

Height:20px; / * For firefox*/

* height:25px; / * For IE7 & IE6*/

_ height:20px; / * For IE6*/ pay attention to the order.

This also belongs to CSS HACK.

# example {color: # 333;} / * Moz * /

* html # example {color: # 666;} / * IE6 * /

* + html # example {color: # 999;} / * IE7 * /

Category 2:

Third, the method of css filter, the following is the classic translation from foreign websites. .

Create a new css style as follows:

# item {width: 200px; height: 200px; background: red;} create a new div and use the previously defined css style: some text here adds the lang attribute to the body representation, zh: now define another style for the div element: *: lang (en) # item {background:green! important } this is to overwrite the original css style with! important, because the lang selector ie7.0 does not support this sentence, so it has no effect on this sentence, so it achieves the same effect under ie6.0, but unfortunately, safari also does not support this attribute, so you need to add the following css style: # item:empty {background: green! important}: empty selector is the specification of css3, although safari does not support this specification. However, this element is still selected, and green is now available in browsers other than all versions of ie, regardless of whether it exists or not. The compatibility of IE6 and FF can be considered in the past! important personally prefer to use

This article is from: http://www.aa25.cn/504.shtml

Recommended way of writing:

# example {color: # 333;} / * Moz * /

* html # example {color: # 666;} / * IE6 * /

* + html # example {color: # 999;} / * IE7 * /

It feels so 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/

Summary of JavaScript browser compatibility

Here are some information about the compatibility of javascript in various browsers.

1. Some reference materials

Http://nexgenmedia.net/evang/iemozguide/

Http://www.javascriptkit.com/domref/

Firefox's extension of css

Http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions

For information about css3, you can test current browser support for css3 online.

Http://www.css3.info

The 2.js debugging tool recommends the firebug plug-in for firefox

Can set breakpoint execution for js

Ability to modify css styles at run time

View dom models, etc.

3. Open all firefox js warnings:

Enter: about:config in the address bar

Double-click, set javascript option restict to open to true, you can see a lot of warnings, which is conducive to error correction

4. What you should pay attention to when using javascript

△ document.all ("id")-> document.getElementById ("id")

And the control is identified by id instead of name as much as possible.

Tip:

If the control has only name and no id, when using getElementById:

IE: objects can also be found

FF: returns NULL

△ 's method of getting an element in form

ElForm.elements ['name']

When △ fetches collection elements, ie supports [] and (), but ff only supports [], such as:

Table.rows (5). Cells (0)

Change to:

Table.rows [5] .cells [0]

The method for △ to determine whether an object is an object should be

If (typeof object variable = = "object")

Not if (object variable = "[object]")

△ eval-> document.getElementById

FF supports eval function

△ calls the object directly through id

Object id.value = ""

Change to

Document.getElementById ("name") .value = ""

△ obj.insertAdjacentElement ("beforeBegin", objText)

Use instead

OBJ [XSS _ clean] .insertBefore (objText,obj)

CreateElement of △ FF does not support HTML code

Use [xss_clean] (esHTML)

Or create the element and then set the attribute. For the input element, you need to set type before adding it to the dom.

Var obj = createElement ("input")

Obj.type = "checkbox"

Var obj2 = document.getElementById ("id2")

Obj2 [XSS _ clean] .insertBefore (obj,obj2)

If you are inserting html code directly, consider using the

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"

Set Attribute to an object in △ FF, and then take it out, when all the properties of the object are lost?

ObjText.setAttribute ("obj", obj)

Alert (obj.id) / / correct name

Obj = objText.getAttribute ("obj")

Alert (obj.id) / / null

There is no problem under IE, FF for setAttribute, the second parameter is string!

So if the second argument is an object, it is equivalent to calling the object's toString () method

The solution is to use the following invocation method

ObjText.dropdown_select = obj

Obj = objText.dropdown_select

△ className-> class

Replacing className under IE with class under FF

Since class is a keyword, you need to use setAttribute/getAttribute

SetAttribute ("class", "css style name")

Attributes defined by △ in html must use getAttribute.

When getting:

Document.getElementByID ("TD1"). IsOBJ always returns undefined, which is OK under 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 override select controls in IE is to use ifame

△ is equivalent to the values below if (vars = = undefined).

Undefined

Null

False

0

△ if FF calls obj.focus ();, try to change it to:

Window.setTimeout (function () {obj.focus ();}, 20)

Under △ FF, keyCode is read-only, so what about converting carriage return to tab? What should I do if I convert the key value during input?

The workaround is:

1. Enter jump-> write your own jump processing code.

Iterate through all the elements in dom to find the next element of the current element that can set focus, and set focus for it

two。 In the controls that can be entered

Replace the selected part with the newly entered content: var text = String.fromCharCode (event.keyCode)

Also prevent keystroke events from uploading, call: event.preventDefault ()

△ will be interpreted by firefox as submitting form or refreshing the page.

Need to write standards

Or in onclick= "original function call (); return false;"

△ can't get the control that actually gets focus in firefox and _ document.onfocus?

Why is document.keydown OK?

△ children-> childNodes

△ sytle.pixelHeight-> style.height

△ determines whether a function or variable exists

If (! ("varName" in window)) var VarName = 1

△ document.body.clientWidth

If the html contains the above statement, you should get the following method

Document.documentElement.clientWidth

△ window.createPopup

FF does not support

△ document.body.onresize

FF does not support

Use _ window.onresize

Notice that the onresize event is not triggered when the page is opened? You need to call it once in onload.

Problems with △ box Model

The default under IE is content-box. For unification, available settings:

Div, td {- moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}

It can also be used at the beginning of the document to add:

But it has a great influence on the old IE code.

△ Registration event

IE: attachEvent

FF: addEventListener ("blur", myBlur, false)

The first parameter event name does not need to be marked with "on"

The third parameter false represents the event passing from the event object along the dom tree to the body direction

△ trigger event

IE: obj.fireEvent ("onclick")

FF:

Var e = document.createEvent ("Events")

E.initEvent ("click", true, false)

Element.dispatchEvent (event)

△ gets the object handle in the event handler

Var oThis = this

Obj.onfocus = function (evt) {

OThis.doOnFocus (evt)

}

△ Unified event handling Framework Code

DoOnFocus (evt) {

Evt = evt | | window.event

Var el = evt.target | | evt.srcElement

/ / subsequent processing

}

△ FF does not support onpropertychange events

But you can define setter methods for properties in FF, such as the following:

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 evt parameters. Refer to the unified event handling framework code.

If (this.onpropertychange) this.onpropertychange (evt)

});

5.IE-> firefox css class

△ cursor:hand-> cursor:pointer

△ expression firefox does not support

Under IE, expression also consumes a lot of CPU, so you shouldn't use it!

In order to achieve better results, we should establish our own expression to javascript handler.

So 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

Not supported

△ transparent

Obj.setAttribute ("bgColor", "# ffffff") under firefox only supports colors.

You must use obj.style.backgroundColor = "transparent".

The height of text control under △ FF is different from that of IE, so unify it.

Input [type=text] {

Height:20px

}

Note that there can be no spaces between input and [!

△ font does not work on body and td in IE, but FF can

Unified use of font-family

6. There are 23 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 influence of DIV+CSS layout of XHTML Standard on website SEO

The influence of div+css layout of xml Standard on website seo

7.1 Code streamlining

Using DIV+CSS layout, the page code is simplified, which I believe anyone who knows anything about XHTML knows. There are two direct benefits brought by code simplification: one is to improve the efficiency of spider crawling, which can crawl the entire page in the shortest time, which is good for the quality of the collection; second, because it can crawl efficiently, it will be liked by spider, which is good for the number of collections.

7.2 nesting of tables

Many SEOer said in their articles, search engines generally do not crawl more than three layers of table nesting, spider crawl Table layout of the page, encounter multi-tier table nesting, will skip the nested content or directly abandon the entire page.

Using Table layout, in order to achieve a certain visual effect, we have to apply multiple tables. If the core content is in the nested table, spider skips this paragraph while crawling without grabbing the core of the page, and the page becomes a similar page. Too many similar pages in the website will affect the ranking and domain name trust.

There is basically no such problem with DIV+CSS layouts, and from a technical point of view, XHTML does not need too much nesting when controlling styles.

7.3 Speed problem

The DIV+CSS layout reduces the page code compared with the Table layout, and the loading speed is greatly improved, which is very beneficial when spider crawls. Too much page code may cause crawling timeout, and spider will think that the page is inaccessible, affecting inclusion and weight.

On the other hand, the real SEOer is not only for the pursuit of inclusion, ranking, fast response speed is the basis to improve user experience, which is very beneficial to the whole search engine optimization and marketing.

7.4 impact on rankings

The DIV+CSS layout based on the XTHML standard is generally as perfect as possible after the design is completed so that it can be verified by W3C. So far, no search engine has indicated that the ranking rules tend to be W3C-compliant sites or pages, but it turns out that sites using XTHML architecture are generally in good shape. This may be controversial, but Xu Sichu himself maintains this view, and some dissidents can compare and observe more than three groups of websites of the same quality.

I think, such a situation may not be a ranking rule, the biggest possibility is that when spider crawls websites, the above differences lead to different quality.

After all, Liao is better than nothing. Friends who suggest building a station or revising it is better to choose the DIV+CSS layout if the technology permits.

The above is all the content of the article "CSS and XTHML Writing specifications and FAQs". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.