CSS common problems and solutions in actual combat

First,the UL label in Mozilla default is padding value, and in IE only margin has value.

Second, the same class selector can be repeated in a document, but the ID selector appears only once.

Use both class and ID for a labelCSSdefinition, if the definition has duplicates, the ID selector makes the definition valid because the ID is weighted higher than class.

Third,OnecompatibilityTo tweak (ie and Mozilla) stupid ways:

Beginners may encounter such a situation: the same labelPropertiesThe IE is set to a display is normal, and in Mozilla must be set to B in order to display normally, or two upside down.

TemporarySolveMethod: Selector {property name: B!important; property name: A} maybe not sometimes.effect。 You can be inwww.xinran001.comSearch for more bug fixes.

Four,If there is a need for spacing between a set of tags to be nested, leave the margin property of the label on the inside, rather than defining the padding of the label on the outside

Five,The icon in front of the Li Tag recommends using background-image instead of list-style-image.

Six, ie, the differences between inheritance and parent-child relationship, all are inheritance relations.

Seven,When adding a selector to your tag, don't forget to annotate the selector in CSS. When you change your CSS later, you'll know why. Also remind you, not too crazy.

Eight,If you set a dark color background for a labelImageand bright-toned text effects. It is recommended that you set a dark-toned background color for your label at this time. Because the picture is missing, you can also keep the text readable.

Nine,DefinedlinksFour states to note the sequencing: Link visited Hover active

10.For images unrelated to the content, please use background. Always remember that performance is separated from content.

11.Defines a color that can be abbreviated #8899ff= #89F

12.Table is useful in some ways, and don't hate it when you encounter content as a data table.

13.<script> without language this attribute, it should be written like this:

<script type="text/javascript">

14, the perfect Tan Shansu outside the Frame line form (in IE5, IE6, IE7 and FF1.0.4 can pass the test)

?

1 2	table{border-collapse:collapse}td{border:#000 solid 1px}

15,margin negative value can be used in the absolute positioning of the label when the role of relative positioning, in the center of the page display, using the absolute positioning of the layer is not suitable for use left:xxpx this property. It's a good practice to put this layer next to a label that you want to position relative, and then use the negative value of margin.

16, the absolute positioning of the use of margin value positioning can be achieved relative to the location of their position, which is different from the Top,left and other properties of the window edge positioning. The advantage of absolute positioning is that it allows other elements to ignore its existence.

17, if the text is too long, then the too long part becomes an ellipsis display: Ie5,ff invalid, but can be hidden, IE6 effective

<div style="width:120px;height:50px;border:1px Solid blue;overflow:hidden;text-overflow:ellipsis  "> is like a line of text, very long, a row in the table does not show .</div>

18, in IE may be due to the text of the comments to repeat the problem can be changed to the note:

1. <!–[if! ie]>; Put your commentary in here...<! [endif]–>

19 . How to call external fonts with CSS

Grammar:

@font-face{font-family:name;src:url (URL); Srules}

Value:

Name: Font names. The value of any possible font-family property

URL (URL): Specify an OpenType font file with an absolute or relative URL address

Srules: Style sheet definition

20 . How do I get the text in a form to be centered vertically?

If the group with row height and height is ineffective in FF, the idea is to define the upper and lower padding to achieve the imagined effect.

21, the definition of a label to pay attention to the small problem:

When we define a{color:red;} , it represents the style of the four states of a, if you want to define a mouse position at this time as long as you define A:hover, the other three states are the styles defined in a.

When you define only one a:link, be sure to define the other three states!

22. Not all styles should be abbreviated:

When the style sheet is defined before the p{padding:1px 2px 3px 4px}, a pattern is added in the subsequent works of the filler 5px, the lower filler 6px.

We don't have to write p.style1{padding:5px 6px 3px 4px}. can be written p.style1{padding-top:5px;padding-right:6px;},

You may feel that this is not as good as the original, but you do not think that the way you write a repeating definition of the style, in addition you can not find the original lower filler and the value of the left padding is how much!

If the previous style p is changed, the style of the p.style1 you define will also change.

23. The larger the site , the more CSS style, before you start, please be fully prepared and planned, including naming rules. Page Block division, internal style classification and so on.

24, fixed-width Chinese character truncation:

Overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

(However, you can only handle truncation of text on one line, and you cannot handle multiple lines.) ) (IE5 above) FF cannot, it is only hidden.