Shulou(Shulou.com)06/03 Report--

This article focuses on "common problems and solutions in DIV CSS design". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the common problems and solutions in DIV CSS design.

Solutions to Common problems in DIV CSS Design

As a front-end developer, it is inevitable to encounter problems of one kind or another in daily page production. I selected some of them for summary and filing, hoping to be helpful to you:

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

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

List 2 solutions: overflow:hidden | line-height:0

2. How many pixel gaps are there at the bottom of the picture?

There are also a variety of solutions, such as defining img as display:block or defining the parent container as font-size:0. Individuals prefer to use vertical-align, whose value can be text-top | text-bottom | middle, etc.

3. IE6 double margin BUG?

Display:inline

4. Align the text vertically to the text input box?

The same is true of setting input to vertical-align:middle,textarea

5. Why can't ie set the color of the scroll bar under the web standard?

Define the style that sets the color of the scroll bar to the html tag selector

6. How to make the layer display on falsh in DIV CSS design?

No, except for a few very senior guys.

However, you can set flash to be transparent, and then the layer will be displayed through falsh, which is similar to overlaying flash, such as:

7. How to keep the text from wrapping?

Define the container that contains text as: width:xxx;white-space:nowrap

8. How to display the text that exceeds the width as an ellipsis in ie?

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

9. How to select checkbox when clicking on text in DIV CSS design?

test

10. One div is margin-bottom:10px and the other div is margin-top:5px. Why is the spacing between the two div 10px instead of 15px?

In this case, the browser will automatically overlap the margin and only display a larger margin value.

Solution: set only one of the div's margin to 15px.

11. In DIV CSS design, how to solve the blank gap between li when there are two or more floats in li under ie?

Set the vertical-align of li. The value can be top | text-top | middle | bottom | text-bottom

12. How to prevent English words from being broken within words?

Word-wrap:break-word

13. Why have the colors of the visited links not changed?

When defining the style of links, you need to follow the order of link,:visited,:hover,:active, which can be memorized using LoVeHAte (likes and dislikes)

14. How can a single line of text be centered vertically?

The height:xxx;line-height:xxx; height is the same as the row height.

15. How can a container of known height be centered horizontally and vertically in the page?

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

16. How can a picture of unknown size be centered horizontally and vertically?

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

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

In standard mode: actual width = width+padding+border

In 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 to make table with 1 pixel thin frame in DIV CSS design?

Method 1: set the border-collapse:collapse of table

Table {border-collapse:collapse;border-color:#000;} td {border-color:#000;} Test

Method 2: the key is to set cellspacine= "1" and use the gap as the border

Table {background:#000;} tr {background:#fff;} Test

20. Several methods of changing words with pictures and their advantages and disadvantages

In fact, the purpose of exchanging words with pictures is to ensure the readability of the page, which is not only beneficial to search engines, but also conducive to structural viewing. As this approach is accepted by most people, there are more and more methods:

Method 1: use a negative value of text-indent to move the content out of the container

Method 2: use display:none to hide the content

Method 3: use padding to squeeze the text out of the container and hidden the excess

Method 4: use font to set ultra-small font to achieve the purpose of hiding content.

Method 1 (highly recommended) looks simple, but there are actually several undesirable places: 1 is to eat resources; 2) there will be a lagging background under the ie5 that cannot be displayed; 3) when the content is a hyperlink, the long black virtual box drives you crazy.

Method 2 (not recommended) is actually not complicated, it just needs to add an extra tag, which is wasteful; and there are too many chances of display:none, which will have a little impact on seo.

Method 3 (recommended) requires two layers of tags under StandardModel, but it still has advantages over methods 1 and 2, so recommend it.

Method 4 (highly recommended) only need to set the font and line height to 0, and then overflow:hidden; however, there will still be 1px high words under Safari and Chrome, so you should set the font color to be the same or similar to the background image. In this way, we can also achieve the purpose of hiding the content, and we have not found any side effects yet, which is highly recommended.

21. How to make the container transparent and the content opaque in DIV CSS design?

Suppose you have the following structure in standard mode:

I don't want transparency.

IEonly method: after the parent container outer is set to transparent, you only need to set the child container inner to position:relative;. If you need to be compatible with other browsers, the above method is not applicable, and the structure needs to be changed to:

I don't want transparency.

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

22. How to remove the dotted frame of the link in the DIV CSS design?

Under IE:

Under FF: a {outline:none;}

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

You can set line-height:n in body. Note, you cannot add units to it.

For reasons, please see: http://blog.doyoe.com/article.asp?id=195

24. How do I insert flash using standard methods?

25. How does StandardModel make the container height:100%??

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

26. How to make the width of the table fixed in DIV CSS design?

When table is set to table-layout:fixed;, the table will use a fixed layout algorithm, and the extra 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;} I am a compatible min-height

28. How to make the mouse hand-shaped and compatible with all modern browsers in DIV CSS design?

Cursor:pointer

29. How to implement position:fixed under ie6?

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

30. How to switch between StandardMode and QuirksMode under IE?

Browsers below IE6 render the page in QuirksMode without triggering it.

Both IE6 and IE7 can be triggered (add HTML comments before the DTD declaration of XHTML):

Trigger of IE6 (add XML declaration before XHTML's DTD declaration):

When you do not use DTD declarations or use DTD declarations below HTML4 (excluding HTML4), almost all browsers use QuirksMode rendering.

31. How do you define multiple different css rules for an element in a DIV CSS design?

.a {color:#f00;} .b {background:#eee;} test

As in the example above, this element has style rules defined by both an and b.

Multiple rules are separated by spaces, and only class can use multiple rules at the same time, id cannot

32. How to distinguish display:none from visibility:hidden?

The same is that both display:none and visibility:hidden can be used to hide an element

The difference is that when display:none hides an element, it removes its placeholder space, while visibility:hidden just hides the content, and its placeholder space is still reserved.

33. In DIV CSS design, how to solve the problem that buttons in IE7 and the following browsers leave more white space on both sides as the number of value increases?

In general, if the length of the value is fixed, you can set a fixed width for the button, which is no problem, but in most cases, the value of the button is mostly variable, so setting the width for the button is not ideal.

The solution is to add # overflow:visible;padding:010px; to the button where overflow is used to remove whitespace on both sides of the ie, and padding is used to make the whitespace of each browser consistent.

At this point, I believe you have a deeper understanding of "common problems and solutions in DIV CSS design". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.