XHTML CSS FAQs and Solutions

As the front-end developers , in the daily page production , inevitably encounter such a problem, I picked some of them to summarize the archive, I hope to be helpful to everyone:

1. How to define a container with very small height?

A container with a small height cannot be defined under IE6 because there is a default row height.

List of 2 solutions : Overflow:hidden | line-height:0

2. How many pixels of blank space appear below the picture ?

This also has several solutions , such as defining IMG as Display:block, or defining the parent container as font-size:0,

A person is more recommended to use Vertical-align, and its value can be Text-top | Text-bottom | Middle, etc.

3, IE6 double margin bug?

Display:inline

4. Text vertically aligned to align this input box?

Set upinputAnd so it is for Vertical-align:middle,textarea.

5, why in the Web Standard IE cannot set the color of the scroll bar?

Defines a style that sets the color of the scroll bar toHTMLlabelSelectCharacter.

6, how to let the layer on the Falsh display?

No, except for a few high-level guys.

However, Flash can be set to transparent, and the layer will be displayed through Falsh, which is approximately covered by flash, such as:

<param name= "mode" value= "Transparent"/>

7, how to make the text does not change line?

Defines the container containing the text as: Width:xxx;white-space:nowrap;

8, ie how to let the text beyond the width display as an ellipsis?

The definition container is: overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

9. How do I select a checkbox when I am writing?

< input id= "test" type= "checkbox" Value= "on"/><label for= "test" > Test </label>

10, a div for margin-bottom:10px, a div for margin-top:5px, why the spacing between 2 div is 10pxinstead of 15px?

This situationBrowserMargin overlaps automatically, showing only large margin values

Solution: Set the margin of only one div to 15px

11. How to solve the gap between Li when there are 2 or more floating in Li under IE?

Set the vertical-align of Li, the value can be top | Text-top | Middle | Bottom | Text-bottom

12, how to make English words do not occur within the word break?

Word-wrap:break-word;

13. Why has the link color been visited unchanged?

When defining the style of a link, you need to follow the order of: link,:visited,:hover,:active, you can use love HAte (like hate) to remember

14. How does single-line text center vertically?

height:xxx;line-height:xxx; High and row height same can be

15. How does a container with a known height center horizontally vertically in the page?

See: http://blog.doyoe.com/article.asp?id=74

16. How does the picture graph of unknown size be horizontally vertically centered?

See: http://blog.doyoe.com/article.asp?id=159

17. What is the difference between box models in standard mode and weird mode?

Standard mode: Actual width = width + padding + border

Weird mode: actual width = Width-padding-border

18, how to solve the 3 pixel bug under IE?

See: http://blog.doyoe.com/article.asp?id=68

19. How do I make a 1-pixel table with a thin border?

Method 1: Set the border-collapse:collapse of the table;

1. <style type= "Text/css" >
   
2. Table{border-collapse:collapse;border-color: #000;}
   
3. Td{border-color: #000;}
   
4. </style>
   
5. <table cellspacing= "0" cellpadding= "0" border= "1" >
   
6. <tr>
   
7. <td> Testing </td>
   
8. <td> Testing </td>
   
9. </tr>
   
10. </table>

Method 2: The key is to set the cellspacine= "1", with the gap as a border

1. <style type= "Text/css" >
   
2. Table{background: #000;}
   
3. Tr{background: #fff;}
   
4. </style>
   
5. <table cellspacing= "1" cellpadding= "0" border= "0" >
   
6. <tr>
   
7. <td> Testing </td>
   
8. <td> Testing </td>
   
9. </tr>
   
10. </table>

20. Several methods and pros and cons analysis of changing words with graphs

To change the word, in fact, to ensure the readability of the page, which is conducive to search engines , but also conducive to structural review.

Because this approach is recognized by most people, there are more ways to do so:

Method 1: Use the negative value of the text-indent to move the content out of the container;

Method 2: Use Display:none to hide the content;

Method 3: Use padding to extrude the text out of the container and to hidden the part beyond;

Method 4: Use the font to set the extra-small font to achieve the purpose of hiding the content.

Method 1 (very not recommended) looks quite simple, but in fact there are a few undesirable places,

1 is compared to eat resources; 2 is the lag background below the IE5 can not be displayed, 3 is the content of hyperlinks, long black dashed box, let you crazy.


Method 2 (not recommended) in fact, it is not complicated, just need to add a label, compared to waste, and the probability of display:none appear too much, the SEO will have a bit of impact.

Method 3 (recommended) Standard model to 2 layers of labels to be done, but the relative methods 1 and 2 have advantages, recommend.


Method 4 (highly recommended) only need to set the font and line height to 0, and then Overflow:hidden, such as font:0/0 Arial, the same can be achieved for the purpose of hidden content, temporarily did not find any side effects, strongly recommended.

21, how transparent container, the content is not transparent?

Assume that the following structure is in standard mode:

class="outer">  class="inner" > I don't want transparency </p></div>

IE only method: After the parent container outer is set to transparent, only the child container inner is set to position: relative;

If you need to be compatible with other browsers, the above method is not applicable and the structure should be changed to:

class="outer"class="inner"> I don't want to be transparent </div>

Then use position + z-index to fix the position.

22, how to remove the dotted box link?

ie under: <a href="#"...>ff: a{outline:none;}

23, how to make the page font spacing always keep n times the font size for the tone?

Set the line-height:n within the body, note, do not think it plus units

Reasons to see: http://blog.doyoe.com/article.asp?id=195

24, how to use the standard method to insert flash?

<divclass="Fla-show"> <ObjectType="Application/x-shockwave-flash"Data="*.swf"Width="*"height="*"> <param name="movie"Value="*.swf"/> "*.jpg"alt="for display when Flash is not supported or masked"/> </Object> </div>

25, Standard Model How to let the container can height:100%?

Set html,body{height:100%;margin:0;}

26, how to make the width of the table fixed?

Set table to table-layout:fixed, the table will use a fixed layout algorithm, the content will not affect the width of the table

27, how to make min-height compatible with IE6?

. min-height{min-height:100px;_height:100px;} class="min-height"> I am compatible min-height</div>

28. How to turn the mouse into hand and compatible with all modern browsers?

Cursor:pointer

29, how to achieve IE6 under the position:fixed?

See: http://blog.doyoe.com/article.asp?id=188

30. How to switch between Standard mode and quirks mode under IE?

IE6 the following browsers do not need to trigger, directly to quirks mode to render the page.

Both IE6 and IE7 can be triggered (preceded by an XHTML DTD declaration with an HTML comment):

" -//W3C//DTD XHTML 1.0 strict//en "      " HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD ">

IE6 trigger (with XML declaration before the DTD declaration of XHTML):

<?xml version="1.0" encoding="utf-8""-// W3C//DTD XHTML 1.0 strict//en"      "http://www.w3.org/TR/xhtml1/DTD/ XHTML1-STRICT.DTD">

When you do not use DTD declarations or use HTML4 (excluding HTML4) for DTD declarations, all basic browsers are rendered using quirks mode.

31, how to define a number of different CSS rules for an element ?

<style type="text/css">. A{color: #f00;}. B{background: #eee;} class="a B"> Test </div>

in the above example, the element has a style rule defined by both A and B.

Multiple rules are separated by spaces, and only class can use more than one rule at a time, and the ID cannot be

32, how to distinguish between display: None and Visibility:hidden?

The same is the Display:none and Visibility:hidden can be used to hide an element;

The difference is that Display:none hides its placeholder space while hiding the element, and visibility: Hidden just hides the content, and its placeholder space remains.