In the use of CSS process will inevitably encounter some common bugs and browser compatibility aspects of processing, below share with you the common CSS 11 skills and experience, like the Web front-end friends can refer to, I hope to help you
1. How do I clear a few pixels of blank space below the picture?
Copy Code code as follows:
Method 1:
Img{display:block;}
Method 2:
Img{vertical-align:top;}
Note: In addition to the top value, you can also set to Text-top
| Middle | Bottom | Text-bottom, even specific <length> and <percentage> values can be
Method 3:
#test {font-size:0;line-height:0;}
Note: #test为img的父元素
2. How do I keep hover and active effects after the hyperlinks are accessed and before the access color is different and after the access?
Copy Code code as follows:
Method:
a:link{color: #03c;}
a:visited{color: #666;}
a:hover{color: #f30;}
a:active{color: #c30;}
Note: Set the hyperlink style in L-v-h-a order, can be shorthand for love (like) hate (dislike)
3. Why is IE unable to set the color of the scroll bar under Standard mode?
Copy Code code as follows:
Method:
html{
Scrollbar-3dlight-color: #999;
Scrollbar-darkshadow-color: #999;
Scrollbar-highlight-color: #fff;
Scrollbar-shadow-color: #eee;
Scrollbar-arrow-color: #000;
Scrollbar-face-color: #ddd;
Scrollbar-track-color: #eee;
Scrollbar-base-color: #ddd;
}
Note: Define the scroll bar color style originally set on the body to the HTML tag Selector
4. How do I force text overflow boundaries to be displayed on one line without wrapping the line?
Copy Code code as follows:
method: #test {Width:150px;white-space:nowrap}
Note: Set the container width and white-space as nowrap, the effect is similar to <nobr> label
5. How do I make the text overflow boundary appear as an ellipsis?
Copy Code code as follows:
method (This method Firefox5.0 not yet supported):
#test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
Note: You first need to set the text to be forced to appear on one line, then truncate the overflow text through Overflow:hidden, and text-overflow:ellipsis the truncated text as an ellipsis.
6. How do I make a continuous long string wrap automatically?
Copy Code code as follows:
method: #test {Width:150px;word-wrap:break-word}
Note: Word-wrap Break-word value allows words to be wrapped within a word
7. How do I get rid of the dotted box of hyperlinks?
Copy Code code as follows:
method: A{outline:none;}
Note: IE7 and earlier browsers because the outline attribute is not supported, it needs to be implemented through the blur () method of JS, such as <a
onfocus= "This.blur ();" ...
8. Standard Model Standard mode and weird mode quirks modes of box model difference?
Copy Code code as follows:
Method:
Standard mode: Element
width = width + padding + border
weird mode: Element
width = width
Note: Related information see CSS3 properties box-sizing
9. How do I disable the Chinese input method in a text box?
Copy Code code as follows:
method: input,textarea{ime-mode:disabled;}
Note: Ime-mode is not a standard attribute, only IE and Firefox support is written when writing the document
10. How do I make the layer appear on the falsh?
Copy Code code as follows:
Methods: <param
name= "wmode" value= "Transparent"/>
Note: Set the Wmode value for flash to transparent or opaque
11. How to set the IFRAME background of IE transparent?
Copy Code code as follows:
Method:
Set the label properties for the IFRAME element allowtransparency= "allowtransparency" and then set the body background color of the IFRAME interior page to transparent. However, this will cause some other problems ie, such as: Set transparent after the IFRAME will not cover the Select
