Firefox and IE series related to the difference between finishing for _javascript skills

, IE and Firefox js and CSS

PNG Transparent AlphaImageLoader
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=benabled,sizingmethod=ssize,src=surl)

Enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true: Default value. Filter activation. False: Filters are prohibited.
Sizingmethod: Options available. String. Sets or retrieves how a picture of a filter's object is displayed within the bounds of the object container. Crop: Cut the picture to fit the object size. Image: Default value. Increase or decrease the size boundaries of an object to fit the size of the picture. Scale: Scales the picture to fit the object's dimension boundaries.
SRC: Required option. String. Specifies the background image using an absolute or relative URL address. If you omit this parameter, the filter will not function.

Firefox cannot support the innertext
Firefox supports innerHTML but does not support innertext, it supports textcontent to achieve innertext, but by default the extra space is retained. If you don't use textcontent, you can replace it with innerHTML if the string contains no HTML code.

Prohibit selection of Web page content
In IE, js:obj.onselectstart=function () {return false;}
and Firefox uses Css:-moz-user-select:none

Support for Filters (example: Transparent filters)
IE:filter:alpha (opacity=10);
firefox:-moz-opacity:.10;

Capturing events
IE:obj.setCapture (), Obj.releasecapture ()
Firefox:document.addEventListener ("MouseMove", mousemovefunction,true);
Document.removeeventlistener ("MouseMove", mousemovefunction,true);

Get mouse position
IE:event.clientX, Event.clienty
Firefox: Event functions are required to pass event objects
Obj.onmousemove=function (EV) {
X= Ev.pagex; Y=ev.pagey;
}

Boundary problems of elements such as Div
For example: Set the Css::{width:100px;height:100px;border of a div: #000000 1px solid;}
ie: div width (including border width): 100px,div height (including border width): 100px;
The width of the firefox:div (including the border width): The height of the 102px,div (including the border width): 102px;

Determine browser type
var isie=document.all? True:false;
I wrote a variable, if the support document.all syntax so isie=true, otherwise isie=false

CSS processing in different browsers
You can generally use!important to prioritize CSS statements (Firefox only)
For example: {border-width:0px!important;border-width:1px;}
Under Firefox this element is not a border, in IE under the border width is 1px

Document.formName.item ("ItemName") problem
Problem Description: IE, you can
Use Document.formName.item ("ItemName") or document.formName.elements
["ElementName"];firefox can only use document.formname.elements["ElementName"].
Workaround: Unify the use of document.formname.elements["ElementName"].

Collection Class object problem
Problem Description: IE, you can use () or [] Get collection Class objects, Firefox, can only use [] Get collection class objects.
WORKAROUND: Use [] to get collection class objects uniformly.

Custom attribute Issues
Problem Description: IE, you can use to get the general properties of the method to obtain custom attributes, can also be used getattribute () derived from the definition of properties, Firefox, can only use getattribute () derived from the definition of attributes.
Workaround: The unification is obtained from the defined attribute through GetAttribute ().

Eval ("Idname") problem
Problem description: Under IE, you can use eval ("Idname") or
getElementById ("Idname") to obtain an HTML object with an ID of idname; Firefox, you can only use
getElementById ("Idname") to obtain an HTML object with an ID of idname.
Workaround: Unify the getElementById ("Idname") to get the HTML object with the ID idname.

Problem with the same variable name as an HTML object ID
Problem Description: IE, HTML object ID can be used as document subordinate object variable name directly use, Firefox can not; Firefox, you may use the same variable name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take variable names with the same HTML object ID to reduce errors and, when declaring variables, add the var keyword to avoid ambiguity.

Const problem
Problem Description: Firefox, you can use the Const keyword or the var keyword to define constants, ie, only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.

Input.type Property Problem
Problem Description: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and write.
WORKAROUND: Do not modify the Input.type property. If you have to modify it, you can hide the original input and then insert a new INPUT element in the same location.

Window.event problem
Problem Description: Window.event can only run under IE, but not under Firefox, this is because Firefox event can only be used in the scene of the incident occurred.
Workaround: Add the event argument to the function that occurred and use var myevent = Evt?evt in the function body (assuming the parameter is EVT): (Window.event?window.event:null)
Example: <input type= "button" onclick= "DoSomething (event)"/>
<script language= "JavaScript" >
function DoSomething (evt) {
var myevent = evt? EVT: (window.event? window.event:null)
...
}

Event.x and EVENT.Y problems
Problem description: Under IE, even objects have X, Y properties, but there is no Pagex, Pagey properties; Firefox, even objects have Pagex, Pagey properties, but no X, y properties.
Workaround: var myx = event.x? Event.x:event.pagex;var Myy = Event.y? Event.y:event.pagey;
If the 8th question is considered, replace the event with MyEvent instead.

Event.srcelement problem
Problem description: Under IE, the even object has srcelement properties, but there is no target attribute; Under Firefox, even objects have the target attribute, but there is no srcelement attribute.
Workaround: Use Srcobj = event.srcelement? Event.srcElement:event.target;
If the 8th question is considered, replace the event with MyEvent instead.

Window.location.href problem
Problem Description: Under IE or firefox2.0.x, you can use Window.location or window.location.href;firefox1.5.x, only use window.location.
WORKAROUND: Use window.location instead of window.location.href. Of course, you can also consider using the Location.replace () method.

Modal and non-modal window problems
Problem description: Under IE, you can open modal and modeless windows via ShowModalDialog and showModelessDialog;
WORKAROUND: Open the new window directly using the window.open (Pageurl,name,parameters) method.
Such as
You need to pass parameters from the child window back to the parent window, and you can use Window.opener in the child window to access the parent window. If you want the parent window to control the child window, use Var
Subwindow = window.open (pageurl,name,parameters) to get the newly opened window object.

Frame and IFRAME problem
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Access to the Frame object
IE: Use Window.frameid or window.framename to access this frame object;
Firefox: Use Window.framename to access this frame object;
Workaround: Unify the use of Window.document.getElementById ("Frameid") to access this frame object;

(2) Switch frame content
Window.document.getElementById ("Frameid") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.html" To toggle the contents of the frame;
If you need to return a parameter in a frame to the parent window, you can use the parent keyword in the frame to access it.

Body Loading problem
Problem Description: Firefox's body object in the body tag is not fully read by the browser before the existence, and IE's body object must be in the body tag is fully read into the browser after the existence.
[note] This problem has not been validated and will be modified after verification.
[note] There are no such problems in IE6, Opera9, and FireFox2, and simple JS scripts can access all the objects and elements that have been loaded before the script, even if the element is not yet loaded.

Event Delegate Method
Problem description: Under IE, use document.body.onload = inject, where function inject () has been implemented before, under Firefox, use document.body.onload = inject ();
Workaround: Unify the use of the Document.body.onload=new Function ("inject ()"), or document.body.onload = function () {//* Here is the code */}
Attention The difference between function and function

The difference between the parent elements accessed
Problem description: Under IE, use obj.parentelement or Obj.parentnode to access the parent node of obj; under Firefox, use Obj.parentnode to access the parent node of obj.
Workaround: Because both Firefox and IE support DOM, the Obj.parentnode is used uniformly to access the parent node of obj.

Cursor:hand VS Cursor:pointer
Problem Description: Firefox does not support hand, but IE support pointer, both are hand-shaped instructions.
Workaround: Unify the use of pointer.

The problem of innertext
Problem description: InnerText in IE can work, but innertext in Firefox but not.
WORKAROUND: Use textcontent instead of innertext in non IE browsers.
Example:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById ("element"). innertext = "my text";
}else{
document.getElementById ("element"). Textcontent = "my text";
}
[note] InnerHTML at the same time by IE, Firefox and other browser support, other, such as outerhtml, such as only by IE support, preferably not.

Object Width-height assignment problem
Problem Description: Firefox similar obj.style.height = imgobj.height statement is invalid.
Solution: Unified Use of Obj.style.height = Imgobj.height + "px";

Table Operation problem
Problem description: IE, Firefox and other browsers for table label operation are different, in IE not allowed to table and TR innerHTML assignment, use JS to add a TR, use the AppendChild method also no use.
Workaround:
Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);
[note] Since I rarely use JS directly to manipulate the table, this problem has not been encountered. It is recommended that you use the JS framework set to manipulate the table, such as jquery.

UL and ol list indent issues
Elimination of UL, OL and other lists of indentation, style should be written: list-style:none;margin:0px;padding:0px;
Where the margin property is effective for IE, the padding attribute is effective for Firefox. ← This statement is wrong, detailed see ↓
[note] This problem has not been validated and will be modified after verification.
Note
After verification, in IE, the setting margin:0px can remove the top and bottom indent of the list, blank and list number or dot, set padding have no influence on the style; in Firefox
, set margin:0px can only remove the upper and lower whitespace, set padding:0px can only remove the left and right indent, but also must set the List-style:none
Can remove list numbers or dots. In other words, in IE only set margin:0px can achieve the final effect, and in Firefox must be set up margin:0px,
padding:0px and List-style:none three items to achieve the ultimate effect.

CSS Transparency Issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] The best two are written and the opacity attribute is placed below.

CSS fillet problem
Ie:ie7 The following versions do not support rounded corners.
ff:-moz-border-
RADIUS:4PX, or-moz-border-radius-topleft:4px;-moz-border-.
radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-
radius-bottomright:4px;.
[note] Fillet problem is a classic problem in CSS, it is recommended to use the jquery framework set to set rounded corners, so that these complex problems left to others to think about it.

Ii. differences between Ie6/ie7 and Firefox for div processing

Basic HTML code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<title>div Float sample</title>
<style type= "Text/css" >
div {margin:3px;}
. d1 {width:250px; min-height:20px; border:1px solid #00cc00;}
. d2 {width:130px; min-height:40px; border:1px solid #0000cc;}
. d3 {width:100px; min-height:40px; border:1px solid #cc0000;}
</style>
<body>
<div class= "d1″>
<div class= "D2″> </div>
<div class= "D3″> </div>
</div>
</body>
The above code shows the following results, normal, the result is the same.

Of course all of these situations may be reasonably explained, perhaps adding a style setting.

The following will be modified on this basis, the modified content is in style, the other code will no longer repeat the write.

Notice that the style here uses min-height, which is different from the height, and min-height specifies a minimum height for the object, when the object's child
The height of the content above this minimum height is that the object will be automatically propped up. This is a very cow style, unfortunately, in this style and float this same cow style used together
, there will be various problems.

Internal one div modification becomes float:left

. d1 {width:250px; min-height:20px; border:1px solid #00cc00;}
. d2 {width:130px; min-height:40px; border:1px solid #0000cc; float:left;}
. d3 {width:100px; min-height:40px; border:1px solid #cc0000;}
The results are shown below.

The results are shown below and the results are as follows!

The results are shown below. : Left in the same situation?

In this result, Firefox is a bit outrageous, two boxes stacked together, why the red box will be big pinch? And the size of the change is also very strange, do not know according to what formula calculated. IE's display here should be in compliance with the standard.

Internal two div all modified to become float:left

. d1 {width:250px; min-height:20px; border:1px solid #00cc00;}
. d2 {width:130px; min-height:40px; border:1px solid #0000cc; float:left;}
. d3 {width:100px; min-height:40px; border:1px solid #cc0000; float:left;}
This is the same as the first addition to the previous float:left.

The results are shown below.

In this case, the results of Firefox can be explained, may be float to the outer div as the inner layer float effect of the range, so that the inner layer will not be the outer div braces. IE has a margin failure here, which can be explained by the impact of the second float in the inner layer.

Simply put the outer div also modified to become float:left

. d1 {width:250px; min-height:20px; border:1px solid #00cc00; float:left;}
. d2 {width:130px; min-height:40px; border:1px solid #0000cc; float:left;}
. d3 {width:100px; min-height:40px; border:1px solid #cc0000; float:left;}
The above code has been tested under these DOCTYPE and the results are the same.

Show the results as follows,

In this case, Firefox is normal, and IE continues the previous anomaly.

The outer layer is float:left, and the last one of the inner layers is no longer float:left

. d1 {width:250px; min-height:20px; border:1px solid #00cc00; float:left;}
. d2 {width:130px; min-height:40px; border:1px solid #0000cc; float:left;}
. d3 {width:100px; min-height:40px; border:1px solid #cc0000;}
Left is the same case. So it's better to have padding and margin?

Show the results as follows,

IE's display here should be in compliance with the standard.

This is the same as the first addition to the previous float:left.

Conclusion

Again, this article is about a more advanced topic. If you use height instead of min-height in style to set the height, these problems will not occur. However, do not need to min-height to lose the Div automatic braces This is a very necessary feature.

In the case of Min-height and Float:left, there is no perfect way to make Firefox and IE result the same. But you can still find a way around.

Further tests can be found that the impact of margin on the padding is better, so it is best to padding and margin are not used, or only padding.

The same code is as follows,

div {padding:3px;}
. d1 {width:250px; min-height:20px; border:1px solid #00cc00; float:left;}
. d2 {width:130px; min-height:40px; border:1px solid #0000cc; float:left;}
. d3 {width:100px; min-height:40px; border:1px solid #cc0000; float:left;}
Left is the same case. When the child content height of the object exceeds this minimum height is.

Show the results as follows,

Oh, finally is the same, although it is made to do the same. Luckily the same, otherwise have to use table.

Of course, all of these situations may be reasonably explained, perhaps adding a certain style setting, these problems are solved, but I have not found this setup yet.

About DOCTYPE

Unfortunately, this style is used with the same ox style as float.

The above code has been tested under these DOCTYPE and the results are the same.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"
"http://www.w3.org/TR/html4/strict.dtd" >
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"http://www.w3.org/TR/html4/loose.dtd" >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

The general method of CSS perfect compatibility ie6/ie7/ff

On the CSS for each browser compatibility has been a cliché, the network of tutorials everywhere. The following content is not too novel, purely personal summary, I hope to have some help for beginners.
First, CSS HACK

The following two methods can solve almost all hack today.

1,!important

With the support of IE7 to!important, the!important method is now targeted only at IE6 hack. (Note the wording. Remember that the claim position needs to be advanced.)

2, Ie6/ie77 to Firefox

*+html and *html is the unique label of IE, Firefox is not supported. And *+html is IE7 unique label.

Attention:
*+html to IE7 hack must ensure that the top of the HTML has the following declaration:

Second, universal float closure

The principle of clear float can be found in [how to clear floats without structural Markup]
Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.

Third, other compatibility skills

1, under the FF to the DIV set padding will cause the width and height increase, but IE will not. (Available!important solution)
2, center problem.
1). vertically centered. Set the line-height to the same height as the current Div, and then pass the Vertical-align:middle. (Note that the content is not wrapped.)
2). Horizontally centered. margin:0 Auto; (certainly not omnipotent)
3, if you need to add a style to the contents of a label, you need to set display:block (common to navigation tags)
4, FF and IE on the BOX understanding of the difference between the 2px is also set for float div in IE under the margin doubling and so on.
5, the UL label below the FF default has List-style and padding. It is best to make a statement beforehand to avoid unnecessary trouble. (Common in navigation labels and content lists)
6, as an external wrapper div do not set dead height, preferably plus overflow:hidden. To achieve a high degree of adaptability.
7, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE.

1 CSS styles for Firefox IE6 IE7
Now most of them are using!important to hack, and for IE6 and Firefox tests to be displayed properly,
But IE7 to!important can correctly explain, will cause the page does not appear according to the request! Find a needle
To IE7 good hack way is to use "*+html", now with IE7 browsing, should have no problem.
Now write a CSS can do this:

#1 {color: #333;}/* Moz/*
* HTML #1 {color: #666}/* IE6 * *
*+html #1 {color: #999;}/* IE7 * *
Then in Firefox font color display for #333,ie6 under the font color display for #666,ie7 under the font color display as #999.

2 centering problems in CSS layouts
The main style definitions are as follows:

body {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }
Description
First, the parent element defines text-align:center, which means that the content within the parent element is centered, and for IE this setting is OK.
But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; ”
To be sure, if you want to use this method to make the entire page centered, it is recommended not to be nested in a div, you can split the multiple div in turn,
Just define Margin-right:auto in each div that is pulled out; Margin-left:auto; It's OK.

3 box models different interpretations

#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-}

4 double distance generated by the floating IE

#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Not controllable (inline element);

#box {display:block//can simulate an inline element as a block element display:inline//effect diplay:table the same row arrangement;

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This is a big problem, if you only use width and height,
In the normal browser, these two values will not change, if only with Min-width and min-height, ie below is not set width and height.
For example, to set the background picture, 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;}

6 minimum width of the page

Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE doesn't recognize this,
And it actually turns the width to the minimum. In order to make this command available on IE, you can put a

Put it under the label, and then assign a class to the DIV:


Then CSS is designed like this:


#container {min-width:600px width:expression (Document.body.clientWidth &lt; 600?) "600px": "Auto");


The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.

7 Clear Floating

. hackbox{display:table;//Display the object as a table at the block element level} or. hackbox{Clear:both;
or add: After (Pseudo object), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not IE browser support,
So it doesn't affect the Ie/win browser. This is the most troublesome ... #box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}

8 Div Floating IE text produces 3 pixel bugs

The left side of the object floating on the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing.

#box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is the key}
HTML code

9 Property Selector (This is not compatible, is a hidden CSS bug)

p[id]{}div[id]{}
This is hidden from the IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, and the scope of the child selector shrinks from the form, and the property selector is larger in scope, as in P[id], and all of the P tags have the same type of ID.

The question of IE hide-and-seek

When the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.
Some content does not show up when the mouse selects this area is found to be true on the page.
WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

11 Height Not suitable

Height is not adaptable when the height of the inner object changes when the outer height can not be automatically adjusted, especially when the inner object is used
When margin or paddign.
Cases:

Content in the P object

CSS: #box {background-color: #eee;}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}
Workaround: Add 2 empty div object CSS code to and from the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.
Vi. CSS Compatibility essentials analysis IE vs FF

CSS Compatibility essentials:

DOCTYPE affect CSS processing

Ff:div set Margin-left, Margin-right is already centered when auto, IE not

Ff:body set Text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

FF: Set padding, div will increase the height and width, but IE will not, it is necessary to use!important more set a height and width

FF: Support!important, IE is ignored, available!important for FF special set style

The vertical center of the div problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines

Cursor:pointer can display cursor finger-like in IE FF at the same time, hand only IE can

FF: Link with border and background color, set Display:block, and set Float:left guarantee No line wrapping. Refer to MenuBar, to set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the MenuBar xhtml+css compatibility solution small Set

The use of XHTML+CSS framework benefits a lot, but there are some problems, whether it is because of the use of unskilled or not clear thinking, I will first put some of the problems I encountered in the following, the province of everyone around to find ^ ^

1, in Mozilla Firefox and IE in the box model interpretation of inconsistencies led to a difference of 2px solution:

div{margin:30px!important;margin:28px;}

Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in IE, in fact, explained that:

DIV{MARING:30PX;MARGIN:28PX}

Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;

2, IE5 and IE6 's box explanation inconsistency IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated with 300px+10px (right padding) +10px (left padding) =320px. Then we can make the following modifications

Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

, about this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if someone understand, please tell me, thanks! ：）

3, UL label in Mozilla default is padding value, and in IE only margin have value, so first define

ul{margin:0;padding:0;}

We can solve most of the problems.

4, regarding the script, does not support the language attribute in the xhtml1.1, only needs to change the code to

< type= "Text/java" >
It's okay.
Seven or 10 CSS tips you may not know

1. CSS font attributes shorthand rules

Generally using CSS to set font properties is done:

Font-weight:bold;

Font-style:italic;

Font-varient:small-caps;

Font-size:1em;

Line-height:1.5em;

Font-family:verdana,sans-serif;

But you can also write them all up in one line:

Font:bold Italic small-caps 1em/1.5em Verdana,sans-serif;

how nice! There is only one caveat: This shorthand method works only if you specify both the Font-size and Font-family properties. And, if you don't set Font-weight, Font-style, and font-varient, they'll use the default value, which is to remember.

2. Use two classes at the same time

Generally, you can only set a class for one element, but that doesn't mean you can't use two. In fact, you can do this:

...

At the same time give p elements two classes, the middle with empty open, so that all text and side two classes of properties will be added to the P element. If the properties in their two classes conflict, then the setting works, that is, the properties of the class that are placed in the CSS file later.

Add: For an ID, you can't write this

...

I can't write that.

3, the default value of CSS border

You can usually set the boundaries of the color, width and style, such as:

BORDER:3PX Solid #000

This shows the boundary as 3 pixel wide, black, solid line. But in fact, you just need to specify the style.

If only the style is specified, the default value is used for other properties. Generally, the border width defaults to medium, which is generally equal to 3 to 4 pixels, and the default color is the color of the text. If the value is right, it's not as much.

4. CSS for document printing

Many web sites have a print version, but in practice this is not necessary because you can use CSS to set the print style.

That is, you can specify two CSS files for the page, one for on-screen display and one for printing:

Line 1th is displayed, and line 2nd is printed, noting the media properties.

But what should I write in the print CSS? You can set it up in a way that is designed to be normal CSS. Design at the same time you can set this CSS to display CSS to check its effect. Perhaps you will use the Display:none command to turn off some decorative images and then turn off some navigation buttons. To learn more, you can see the "Print Difference" article.

5, Picture replacement skills

It is generally recommended that you use standard HTML to display text instead of using pictures, which is faster and more readable. But if you want to use some special fonts, you can only use pictures.

For example you want to sell the whole thing icon, you use this picture:

That's OK, but for search engines, they're less interested in alt text than normal text because many designers put a lot of keywords here to trick search engines. So the method should be this:

Buy widgets

But then there is no special font. To achieve the same effect, you can design css like this:

H1 {Background:url (/blog/widget-image.gif) no-repeat; height:image height text-indent: -2000px}
Notice that the image height is changed to the height of the real picture. Here, the picture will be displayed as a background, and the real text because of the set-2000 pixel indentation, they will appear on the left side of the screen 2000 points, it is not visible. But for those who close the picture, you may not be able to see it.

6. Another adjustment technique of CSS box model

The box model was adjusted primarily for IE browsers before IE6, which counted the width of the boundary and the padding on the element width. Like what:

#box {width:100px; border:5px; padding:20px}

Call it this way:

...

At this point the full width of the box should be 150 points, which is correct in all browsers except IE browsers before IE6. But on a browser like IE5, its full width is still 100 points. This difference can be handled using the box adjustment method that was invented by the previous person.

But using CSS can also achieve the same goal, let them show the same effect.

#box {width:150px} #box div {border:5px; padding:20px}

This call:

...

In this way, no matter what browser, the width is 150 points.

7, the Block element center alignment

If you want to be a fixed-width page and want to center the page horizontally, this is usually the case:

#content {width:700px; margin:0 auto}

You will use

To surround all the elements. This is simple, but not good enough, IE6 the previous version will not show this effect. Change the CSS as follows:

Body {Text-align:center} #content {text-align:left; width:700px; margin:0 Auto}

This will center the content of the page, so in the content is added to the

Text-align:left.

8, the use of CSS to deal with vertical alignment

Vertical alignment with the table can be easily implemented, set the table cell Vertical-align:middle on it. But it's no use for CSS. Setting this property is useless if you want to set a navigation bar that is 2em high and you want to center the navigation text vertically.

What is the CSS method? Yes, the line height of these words is set to 2em:line-height:2em, this is OK.

9, CSS in the container positioning

One advantage of CSS is that you can position an element arbitrarily, within a container. For example, for this container:

#container {position:relative}

All elements in the container are positioned relative to each other, and can be used in this way:

...

If you want to navigate to the left 30 points from 5 points, you can:

#navigation {position:absolute; left:30px; top:5px}

Of course, you can also do this:

margin:5px 0 0 30px

Note that the order of 4 digits is: top, right, bottom, left. Of course, sometimes the method of locating rather than the margin is better.

10, straight to the bottom of the screen background color

In the vertical direction is to control is not the CSS. If you want the navigation bar and the content bar to go straight to the bottom of the page, it is convenient to use the table, but if you only use this CSS:

#navigation {background:blue; width:150px}

The shorter navigation bar will not go straight to the bottom of the section, the halfway end of the content it is over. What should we do?

Unfortunately, the only way to cheat is to add a background image to the shorter column, width and bar width, and make it the same color as the set background color.

Body {background:url (/blog/blue-image.gif) 0 0 Repeat-y}
You cannot use EM as a unit at this time, because in that case, once the reader changes the font size, the trick will be revealed, only px.