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

This article mainly explains the "DIV+CSS page layout common problems and solutions", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "DIV+CSS page layout common problems and solutions" bar!

Common problems and Solutions of DIV+CSS

1. What is the problem with the hover style after hyperlink access?

The hyperlink styles that have been clicked and visited no longer have hover and active. The solution is to change the order of the CSS attributes: L-V-H-A.

Double margin BUG of 2.IE6

For example:

Viewplaincopytoclipboardprint?

Body {margin:0;} div {float:left;margin-left:10px;width:200px; height:200px;border:1pxsolidred;} style > body {margin:0;} div {float:left;margin-left:10px;width:200px; height:200px;border:1pxsolidred;} style >

After floating, the outer margin is 10px, but IE is interpreted as 20px. The solution is to add display:inline.

Why can't the text under FF open the height of the container in 3.DIV+CSS?

The container with a fixed height in a standard browser will not be stretched as it is in IE6, so I want to fix the height and how do I want to be able to be stretched? The way to do this is to remove the height and set the min-height:200px;. In order to take care of the IE6 that does not know min-height, you can define it as follows:

Viewplaincopytoclipboardprint?

Div {heightwaver autoimportantposition heightlace 200px; div {heightfrog autoheight importantlyheightlange 200px;}

Why can't IE set scroll bar color in web standard in 4.DIV+CSS?

Original style settings:

Viewplaincopytoclipboardprint?

Body {scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000;scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff;} style > body {scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000;scrollbar-track-color:#fff Scrollbar-darkshadow-color:#fff;} style >

The solution is to replace body with html.

5. Why can't you define a container about the height of 1px?

This problem under IE6 is caused by the default line height, and there are many solutions, for example: overflow:hidden | zoom:0.08 | line-height:1px.

How can layers be displayed on top of FLASH in 6.DIV+CSS?

The workaround is to set transparency for FLASH:

Viewplaincopytoclipboardprint?

: a >:

7. How do I center a layer vertically in the browser?

Viewplaincopytoclipboardprint?

Style > style >

The method of absolute positioning of the percentage and the negative value of the external patch is used here, and the negative value is divided by its own width and height by two.

Solution to the problem of centering Firefox nested div tags in 8.DIV+CSS

Suppose the following:

Viewplaincopytoclipboardprint?

Div > div >

If you want to center b in a, you generally only need to use CSS to set the text-align property of a to center. This approach looks fine in IE; but in Firefox, b will be on the left. The solution is to set the horizontal margin of b to auto. For example, set the CSS style of b to: margin:0auto;.

The best solutions are often the simplest. Here are eight DIV+CSS tips, which are so simple that you only need to write a single line of code and define a property parameter. It is very suitable for novice friends learning CSS to read.

◆ uses line-height to center vertically

Line-height:24px

When you use a fixed-width container and need a row to be centered vertically, use line-height (the height is the same as the parent layer container).

◆ clears the container float

Viewplaincopytoclipboardprint?

# main {overflow:hidden;} # main {overflow:hidden;}

◆ does not let links break.

Viewplaincopytoclipboardprint?

A {whitewhite-space:nowrap;} a {white-space:nowrap;}

The above settings can avoid link breaks, but it is personally recommended that long links have corresponding lines (for a discussion of line breaks, see the record at the center of the circle).

◆ always makes Firefox display scroll bars

Viewplaincopytoclipboardprint?

Html {overflow:-moz-scrollbars-vertical;} html {overflow:-moz-scrollbars-vertical;}

You can also use the

Viewplaincopytoclipboardprint?

Body,html {min-height:101%;} body,html {min-height:101%;}

Center block elements horizontally in ◆ DIV+CSS

Margin:0auto

Actually, it is.

Viewplaincopytoclipboardprint?

Margin-left:auto; margin-right:auto; margin-left:auto; margin-right:auto

This technique is explained in almost all CSS textbooks, so don't forget to add a width to it. It can also be used under Exploer

Viewplaincopytoclipboardprint?

Body {text-align:center;} body {text-align:center;}

Then define the inner container

Text-align:left

Hide the scroll bar of Exploertextarea in ◆ DIV+CSS

Viewplaincopytoclipboardprint?

Textarea {overflow:auto;} textarea {overflow:auto;}

Exploer textarea has a vertical scroll bar by default.

◆ settings print paging

Viewplaincopytoclipboardprint?

H3 {page-break-before:always;} h3 {page-break-before:always;}

Page-break-before is a performance setting for paging when printing a web page.

Delete the dashed wireframe on the link in ◆ DIV+CSS

Viewplaincopytoclipboardprint?

A:active,a:focus {outline:none;} a:active,a:focus {outline:none;}

By default, Firefox adds a dotted frame to the focus of the link (or when clicked), which can be deleted using the above attributes.

◆ 's simplest DIV+CSS reset

Viewplaincopytoclipboardprint?

* {margin:0;padding:0} * {margin:0;padding:0} Thank you for your reading, these are the contents of "Common problems and Solutions of DIV+CSS Page layout". After the study of this article, I believe you have a deeper understanding of the common problems and solutions of DIV+CSS page layout, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.