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

This article mainly explains "DIV+CSS page misplacement reasons and how to solve", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "the reasons for DIV+CSS page dislocation and how to solve it"!

Often we will encounter the layout that we want to set in a row, but for various reasons caused by dislocation, see the result is that the layout of the last box in a row has been misplaced (as shown below).

Dislocation one 3 Dislocation falls with 1 and 2 below

Misplacement II Web page layout misplacement demonstration

There are probably two reasons for the misplacement of DIV CSS web pages, one is the width calculation error, and the other is caused by IE bugs, especially IE6 and IE7. Next, we introduce dislocation and solution to dislocation next to each other.

First, the width calculation error solution

Width calculation error, if the total width is 500px, there are 3 boxes, respectively css width is 200px, 200px, 100px, this problem will not be displayed in a row dislocation, but if you add css border, padding, margin attributes, do not forget the width of these attributes. Especially padding and border occupy width space do not ignore. If there is a box added to the left and right borders, at this time there is a box with just the right width to reduce the occupied width of the border by 2px, otherwise the total width of the total three boxes will be greater than the total width, resulting in dislocation.

Width issues cause CSS layout misalignment Summary:

The sum of the width of the inner box is greater than the outer width, resulting in dislocation. When checking, we must calculate the sum of the width, border, paddind and margin.

IE bugs, especially IE6 and IE7, cause misplacement

This problem is the most common problem, we check the first point width problem, and the width is not a problem, this time in IE6, IE7 misplacement, in IE8 and other browsers there is no misplacement problem, this time we have to consider whether you use the margin attribute, usually we use CSS float (css float) case using margin (margin-right margin-left here especially this attribute) This attribute will produce double values, this time we need to use css hack to solve this problem. Let IE6 or IE7 recognize the specially specified margin style separately.

For example:

1. IE6 is identified separately (margin-left for only IE6 misplacement)

{margin-left:5px;_margin-left:2px}

At this time, other browsers except IE6 are set to margin-left:5px, IE6 alone identifies_margin-left:2px

2, IE7 and IE6 are recognized (margin-left for ie6 and ie7 to recognize other versions and brand browsers do not set)

{margin-left:5px;*margin-left:2px;}

At this time, except IE6 and IE7, other browsers are set to margin-left:5px, IE6 and IE7 recognize *margin-left:2px

At this point, I believe that everyone has a deeper understanding of "the reasons for DIV+CSS page dislocation and how to solve it," so you may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to 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.