Xhtml css FAQs and Solutions

From: http://www.cnblogs.com/leavingme/archive/2008/12/03/1347008.html
1. How to define a container with a very small height?

In IE6, containers with a small height cannot be defined because there is a default Row Height.
List two solutions: ovoverflow: hidden linear line-Height: 0

2. How many pixels of white space appear below the image?

There are also a variety of solutions, such as defining IMG as display: block, or defining the parent container as font-size: 0. We recommend that you use vertical-align, the value can be text-top character text-bottom character middle.

3. What is the double margin bug in IE6?

Display: inline

4. Is the text vertically aligned with the text input box?

Set input to vertical-align: middle, and so does textarea.

5. Why cannot I set the color of the scroll bar in IE under the Web standard?

Define the style that sets the scroll bar color to the HTML Tag selector.

6. How can I display the layer on falsh?

No, except for a few very high-level guys.
However, you can set the flash to transparent. In this case, the layer will be displayed through falsh, which is similar to overwrite the flash, for example:
<Param name = "Mode" value = "Transparent"/>

7. How can I keep text lines unchanged?

Define the container containing text as: width: XXX; white-space: nowrap;

8. In IE, how does one display text that exceeds the width as a ellipsis?

Define the container as overoverflow: hidden; width: XXX; white-space: nowrap; text-overflow: ellipsis;

9. How can I also select checkbox when clicking text?

<Input id = "test" type = "checkbox" value = "on"/> <label for = "test"> test </label>

10. If a div is margin-bottom: 10px and a div is margin-top: 5px, why is the distance between the two divs 10px instead of 15px?

In this case, the browser will automatically overlap the margin and only display the large margin value.
Solution: Set the margin of only one Div to 15px.

11. How to Solve the blank gap between Li When there are two or more Li fluctuations in IE?

Set vertical-align of Li. The value can be top plain text-top plain middle character bottom character text-bottom.

12. How can I keep English words from being broken?

Word-wrap: Break-word;

13. Why is the color of the accessed link unchanged?

When defining a link style, you can use love hate to remember it in the order of link, visited, hover, and active.

14. How to vertically center a single line of text?

Height: XXX; line-Height: XXX; the height is the same as the Row Height.

15. How do containers with a known height align horizontally and vertically on the page?

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

16. How do I align an image with an unknown size horizontally and vertically?

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

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

Standard mode: actual width = width + padding + border
In Weird mode: actual width = width-padding-border

18. How to Solve the 3 pixel bug in IE?

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

19. How to Create a table with a 1 pixel border?

Method 1: Set the border-collapse: Collapse of the table;
<Style type = "text/CSS">
Table {border-collapse: collapse; border-color: #000 ;}
TD {border-color: #000 ;}
</Style>
<Table cellspacing = "0" cellpadding = "0" border = "1">
<Tr>
<TD> test </TD>
<TD> test </TD>
</Tr>
</Table>

Method 2: Set cellspacine = "1" and use the gap as the border
<Style type = "text/CSS">
Table {Background: #000 ;}
Tr {Background: # FFF ;}
</Style>
<Table cellspacing = "1" cellpadding = "0" border = "0">
<Tr>
<TD> test </TD>
<TD> test </TD>
</Tr>
</Table>

20. Analysis on the advantages and disadvantages of image changing

In order to ensure the readability of the page, it is conducive to both search engines and structure viewing. As this method is recognized by most people, there are more and more methods:

Method 1: Use the negative value of text-indent to remove the content from the container;
Method 2: Use display: none to hide the content;
Method 3: Use padding to squeeze the text out of the container and hide the excess parts;
Method 4: Use font to set the ultra-small font to hide the content.

Method 1 (not recommended) looks quite simple, but there are actually a few unsatisfactory aspects. 1 is resource-consuming; 2 is lagging behind in ie5 and cannot be displayed; 3. When the content is hyperlink, the long black dotted box will drive you crazy.
Method 2 (not recommended) is actually not complicated, but it is a waste of adding one more tag, and there are too many chances of display: None, which will also have a slight impact on Seo.
Method 3 (recommended) the standard model requires two-layer labels. However, compared with methods 1 and 2, the standard model has advantages. We recommend that you.
Method 4 (strongly recommended) only needs to set the font to 0, and then overflow: hidden; for example, Font: 0/0 Arial; overflow: hidden; can also achieve the purpose of hiding content, no side effects have been found yet. We strongly recommend that you.

21. How is the container transparent and the content opaque?

Assume that the standard mode has the following structure:
<Div class = "outer">
<P class = "inner"> I Don't Want To Be transparent </P>
</Div>

Ie Only Method: After the parent container outer is set to transparent, you only need to set the inner of the sub-container to position: relative. If you need to be compatible with other browsers, the above method is not applicable, the structure also needs to be changed:

<Div class = "outer"> </div>
<Div class = "inner"> I Don't Want To Be transparent </div>

Use Position + Z-index to get the position

22. How do I remove the dotted box of the link?

IE: <a href = "#" onfocus = "This. Blur ();"...>
FF: A {outline: none ;}

23. How can I keep the page font spacing n times the font size as the tone?

Set line-Height: N in the body. Note that you cannot add units to the body.
Reason can see: http://blog.doyoe.com/article.asp? Id = 195

24. How can I insert a flash using a standard method?

<Div class = "fla-show">
<Object type = "application/X-Shockwave-flash" Data = "*. SWF" width = "*" Height = "*">
<Param name = "movie" value = "*. SWF"/>

</Object>
</Div>

25. How does the Standard Model enable the container to have the height: 100%?

Set HTML, body {Height: 100%; margin: 0 ;}

26. How can I fix the table width?

Set table to table-layout: fixed. In this case, the table uses a fixed Layout Algorithm. The extra content does not affect the width of the table.

27. How to Make Min-height compatible with IE6?

. Min-height {Min-Height: 100px; _ Height: 100px ;}
<Div class = "Min-height"> I am compatible with Min-height </div>

28. How can we turn the mouse into a hand shape and be compatible with all modern browsers?

Cursor: pointer

29. How to Implement position: fixed in IE6?

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

30. In IE, how do I switch between standard mode and quirks mode?

Browsers lower than IE6 do not need to be triggered. The page is displayed directly in quirks mode.

Both IE6 and IE7 can be triggered (add an HTML comment before the xhtml dtd statement ):
<! -- Let IE6 and IE7 into quirks mode -->
<! -- Ctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt -->

Trigger of IE6 (add the XML statement before the DTD statement of XHTML ):
<! -- L version = "1.0" encoding = "UTF-8 -->
<! -- Ctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt -->

When you do not use a DTD declaration or a DTD declaration below html4 (excluding html4), basically all browsers use quirks mode for rendering.

31. How to define multiple different CSS rules for an element?

<Style type = "text/CSS">
. A {color: # f00 ;}
. B {Background: # Eee ;}
</Style>

<Div class = "a B"> test </div>

In the preceding example, the element has style rules defined by A and B at the same time.
Multiple rules are separated by spaces, and only the class can use multiple rules at the same time.

32. How is the difference between display: none and visibility: hidden?

Similarly, both display: none and visibility: hidden can be used to hide an element;
The difference is that when the display: None element is hidden, its placeholder space is also removed; while visibility: hidden only hides the content, and its placeholder space is still retained.