Naturally, the starting position of IE 7 and IE 8 is different from that of IE 8 in the preset webpage layout. For the following code, the starting position of IE 7 and IE 8 is different.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div style = "height: 100px; width: 200px; border: solid 1px black">
<Div>
<A href = "http://www.hinet.net"> Hinet </a>
</Div>
</Div>
</Body>
</Html>
However, the entire offset has little impact on the webpage.
2. P in DIV
The following execution result shows the difference between IE 7 and IE 8 in P processing DIV.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div style = "height: 100px; width: 200px; border: solid 1px black">
<Div>
<P> TEST Font </p>
</Div>
</Div>
</Body>
</Html>
Obviously, in IE 8, the P preset position in DIV is different from that in IE 7. in IE 7, margin-top is set to 0 PX and placed at the top of the column ,, IE 8 has not preset margin-top,
The solution is to add margin-top.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div style = "height: 100px; width: 200px; border: solid 1px black">
<Div>
<P style = "margin-top: 0px"> TEST Font </p>
</Div>
</Div>
</Body>
</Html>
(IE 8 With margin-top)
3. negative margin
Many Web Designers often use negative margin to locate HTML elements in order to align the elements with the image. IE 7 and IE 8 have very different interpretations of negative numbers.
Program 4
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div style = "height: 100px; width: 200px; border: solid 1px black">
<Div style = "background-color: Red; margin:-5px 6px 7px 8px">
<A href = "http://www.hinet.net"> Hinet </a>
</Div>
</Div>
</Body>
</Html>
The comparison graph shows that when IE 7 encounters a negative number, it will not be removed from the DIV range, while IE 8 will. At the time of writing this article, most incompatible IE8 webpage errors are from this.
4. Table With Border Style
The Layout of elements varies slightly in each browser. The following code shows a different example on IE 7 and IE 8. Table
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Table style = "border: double 7px green">
<Tr>
<Td style = "border: double 1px green"> a </td>
<Td style = "border: double 1px green"> a </td>
<Td style = "border: double 1px green"> a </td>
</Tr>
<Tr>
<Td style = "border: double 1px green"> a </td>
<Td style = "border: double 1px green"> a </td>
<Td style = "border: double 1px green"> a </td>
</Tr>
<Tr>
<Td style = "border: double 1px green"> a </td>
<Td style = "border: double 1px green"> a </td>
<Td style = "border: double 1px green"> a </td>
</Tr>
</Table>
</Body>
</Html>
Obviously, the border Width Calculation of IE 7 is higher than that of IE 8, but because this is the overall offset, and we rarely set a large border width, the impact degree is almost equal to 0.
5. bottom and top
When the absolute position is used, IE 7 and IE 8 will produce some offsets, which are integral, so the impact is very small.
Example:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div style = "height: 100px; width: 200px; border: solid 1px black">
<Div style = "background-color: Red; bottom: 5px; top: 5px; position: absolute; height: 40px">
TEST
</Div>
</Div>
</Body>
</Html>
It is hard to see, because the offset is very small, but it is indeed an offset.
6. li + float
UL, LI, and float are quite different in IE 7 and IE 8, see:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div>
<Div>
<Ul>
<Li style = "cursor: hand; float: left;">
TEST1 </li>
<Li style = "cursor: hand; float: left;">
TEST2 </li>
<Li style = "cursor: hand; float: left;">
TEST3 </li>
<Li style = "cursor: hand; float: left;">
TEST4 </li>
<Li style = "cursor: hand; float: left;">
TEST5 </li>
</Ul>
</Div>
</Div>
</Body>
</Html>
On IE 7, the LI project symbol is canceled, while on IE 8, it is displayed normally, but it is float, so the subsequent project symbol is replaced with the previous project. After modifying it to the format of Program 8
And the two are close to the same.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div>
<Div>
<Ul style = "list-style-type: none">
<Li style = "cursor: hand; float: left;">
TEST1 </li>
<Li style = "cursor: hand; float: left;">
TEST2 </li>
<Li style = "cursor: hand; float: left;">
TEST3 </li>
<Li style = "cursor: hand; float: left;">
TEST4 </li>
<Li style = "cursor: hand; float: left;">
TEST5 </li>
</Ul>
</Div>
</Div>
</Body>
</Html>
Many websites have such problems when trying to find CSS differences, because we often use this method to process the display of tab classes.
PS: list-style-type in IE7, as long as the li is float, it will be completely ignored.
7. div + height with ul and image
When the DIV is set to a fixed size, and the content exceeds the specified size, and then follows the IMG, there will be a considerable difference in IE 7 and IE 8.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Div>
<Div style = "width: 300px; height: 22px; margin-top: 5px">
<Ul style = "list-style-type: none">
<Li style = "cursor: hand; float: left;">
TEST1 </li>
<Li style = "cursor: hand; float: left;">
TEST2 </li>
<Li style = "cursor: hand; float: left;">
TEST3 </li>
<Li style = "cursor: hand; float: left;">
TEST4 </li>
<Li style = "cursor: hand; float: left;">
TEST5 </li>
<Li style = "cursor: hand; float: left;">
TEST6 </li>
</Ul>
</Div>
<A href = "http://www.hinet.net>">
</A>
</Div>
</Body>
</Html>
Obviously, IE 7 will respect the size of the DIV to arrange the IMG position next to it, so there is no problem in figure 14, but in IE 8, when the content exceeds the specified size,
This problem occurs because the IMG position is removed. In practice, this is a common compatibility error.
The solution is very simple. Just move the LI that will be covered away. This is a wrong design.
8. Align the child controls of p
Some web designers are used to using P + child controls to depict single-line Input + button styles. These web pages may differ in IE 8. If there are too many IMG,
The difference will be too big to be ignored.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<P>
<Input type = "text"/>
</P>
</Body>
</Html>
Obviously, IE 7 sets IMG to P, but IE 8 does not. This type of problem is very difficult to solve. We need to use CSS to determine the IE version to provide different CSS, so that the two are close to the same.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<! -- [If gte IE 8]>
<Style type = "text/css">
. C1
{
Position: relative; top: 3px
}
</Style>
<! [Endif] -->
<! -- [If lt IE 8]>
<Style type = "text/css">
. C1
{
}
</Style>
<! [Endif] -->
</Head>
<Body>
<P>
<Input type = "text"/>
</P>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
