IE and FireFox on the CSS summary of the problem of inadequate support
Related Tags:
Note: The following issue only for IE6 and below versions, and the following FireFox2.0.3 version, in the follow-up could be improved version, the author did not make further tests.
[] Introduction to the development of css 2.0 browser Although manufacturers have been strongly supported and in many respects, there is still insufficient information and did not fully standardized. Web site designers now commonly used methods or Hack CSS CSS document prepared by the two solutions of different browser compatibility issues. Following will be encountered in peacetime, when they were reading books, and the corresponding solutions to a simple summary. Learning their allies hope will give some enlightenment, we also hope that the collective wisdom, will comment on the issue and found their own solutions written jointly study and improvement.
1, Box Model:
A Width of the calculation.
In the CSS standards, a box model includes four areas, namely: content, the Margin (padding), frame (border), and from the outside (margin). Width and width of the calculation, CSS has its standards. But in fact, different browser performance are different. For example,
Firefox (FF) is accurate according to CSS standards: width as the width of the content, that is to say:
Layer width = width + Padding (left and right) + border-width;
And IE put width as the width of the entire layer:
Content width = width - padding - border-width;
B, IE margin in the double issue.
When the father of the use of Float time, the margin of sublayer will be doubled in the FireFox does not exist in this phenomenon.
<html Xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> Untitled Document </ title>
<style>
. Outer (
Width: 500px;
Height: 200px;
Background: # 000;
)
. Inner (
Float: left;
Width: 200px;
Height: 100px;
Margin: 5px;
Background: # fff;
)
</ Style>
</ Head>
<body>
<div Class="outer">
<div Class="inner"> </ div>
</ Div>
</ Body>
</ Html>
Above code in IE browser can be found in a white box from the left side of the Border is twice.
Solutions: in the definition of inner inside add display: inline; attributes.
Reference code: box model on a range of issues
C, a high degree of不适应box problem.
When lining changes in target height, the Height of the outer object can not be automatically adjusted, in particular the use of the inner margin and padding object attributes of times. At the same time the problem exists in IE / Firefox / Mazilla in.
<html Xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> Untitled Document </ title>
<style>
. Outer (
Background: # FFFF00; / * yellow frame used as a Background * /
)
. Inner (
Margin-top: 20px;
Margin-bottom: 20px;
Text-align: center;
Background: # 0000FF; / * internal use blue box * /
Color: # FFFFFF;
)
. Box (
Background-color: # 66FF99; / * this as a reference point * /
)
</ Style>
</ Head>
<body>
<div Class="box"> upper </ div>
<div Class="outer">
<div Class="inner"> object in the content of </ div>
</ Div>
<div Class="box"> lower </ div>
</ Body>
</ Html>
Preview when the code above can be found, the outer part of the upper and lower left another 20 px space, and this is the definition of inner margin-top and bottom-margin value. Although in the outer inner internal, but outer space has not increased share (through its background Color can be seen).
Solutions: (1) defined in the outer ouer style padding or border, so it can be to re-calculate their outer level. Such as:
Background: # FFFF00; / * yellow frame used as a background * /
Border: 1px solid # fff;
)
1 px white frame users in the invisible white background. However, if the value of the use of border, we must specify the type of frame, solid or dotted otherwise FireFox shows that, on the upper and lower margins become 0.
(2) before a higher requirements in the design of the programme, 1 px have an impact on the error. And could therefore be initiated from the internal ouer to add two empty div objects, and its high degree of 0 px to solve the problem.
Height: 0px;
Overflow: hidden;
)
<div Class="outer">
<div Class="clear-div"> </ div>
<div Class="inner"> object in the content of </ div>
<div Class="clear-div"> </ div>
</ Div>
<div Class="box"> lower </ div>
Li above reference "site layout Record" 259 related solutions. Found in the actual definition of clear-div data for the overflow: hidden;, will be displayed in Dreamweaver is not normal. Browser to Display correctly.
(3) There are a number of internal div outer layer elements, and use of float: left; time, the above solutions are invalid. At this point in the outer div add overflow attributes, in the lining at the same time add a div Finally, the use of Clear at the same time: both attributes. Code as follows:
<html Xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> Untitled Document </ title>
<style>
. Outer (
Width: 600px;
Background: # 000;
Overflow: auto; / * add here * /
)
. Inner1 (
Display: inline; / * in IE to prevent a double error margin * /
Float: left;
Width: 200px;
Height: 100px;
Margin: 5px;
Background: red;
)
. Inner2 (
Display: inline; / * in IE to prevent a double error margin * /
Float: left;
Width: 200px;
Height: 100px;
Margin: 5px;
Background: yellow;
)
. Clear (
Clear: both; / * this is also a must * /
)
</ Style>
</ Head>
<body>
<div Class="outer">
<div Class="inner1"> </ div>
<div Class="inner2"> </ div>
<div Class="clear"> </ div> / * Add this to a * /
</ Div>
</ Body>
</ Html>
Reference article: CSS: IE and Firefox features of the CSS-compatible
- IE and Firefox under CSS, and the distinction between analytic solutions
- IE FireFox different interpretations of the collection CSS
- Div prevent forms or by shoring CSS, to support firefox, to be a reminder
- [To] use IE conditions Notes compatible IE, Opera, Firefox + CSS DIV forms the layout By shawl.qiu
- [To] the IE and Firefox compatible CSS Daquan
- FIREFOX under IE and the difference between CSS
- CSS generated special effects
- CSS: IE and Firefox features of the CSS-compatible
- Using CSS effects produced images
- Mozilla Firefox proposed CSS written order
- [To] IE and Firefox under CSS analytic distinction
- Pure CSS support the pull-down menu IE6 IE7 Firefox
- CSS font control effects of Thinking
- CSS solution with the difference between IE and Firefox
- IE and Firefox under CSS analytic distinction
- IE and FireFox on the problem of insufficient support for CSS 2 Summary
- IE and FireFox on the CSS summary of the problem of inadequate support
- CSS used in firefox achieve rectangular fillet
- CSS supports the pull-down menu IE6 IE7 Firefox
- Focuses on the IE6, IE7, Firefox how to use CSS hack question!
