Method 1
. Ie7 {
Display: inline-block;
* Zoom: 1;
* Display: inline;
}
Later I saw another method.
# Id {display: inline-block ;}
# Id {display: inline ;}
Note: it is necessary to write separately. If writing in the same selector does not work, this is a bug in IE.
In IE, the display: inline-block only triggers the layout of the element. For example, if you give the display: inline-block to the div, you can only ensure that the div has the features of the block element (width and height can be set), but it is still a row layout (line feed is generated ). Next, set display: inline. Change the layout of this div to inline layout (no line breaks are generated ).
Appendix 1
In IE6, how does one implement display: inline-block?
There are two methods:
1. Use the display: inline-block attribute to trigger the block element first, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS declarations to achieve the effect, which is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The code is as follows (... for other omitted attributes ):
Div {display: inline-block ;...}
Div {display: inline ;}
2. Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (for example, zoom: 1 or float attribute ). The code is as follows:
Div {display: inline-block; _ zoom: 1; _ display: inline;}/* recommended */
Div {display: inline-block; _ zoom: 1; * display: inline;}/* recommended: IE67 */
Example
<! DOCTYPE html>
<Html lang = "gb2312">
<Head>
<Meta charset = "gb2312"/>
<Title> example </title>
<Style>
# Example li {display: inline-block;}/* The inline-block attribute set here is invalid in ie6 7, only triggering layout of ie */
# Example li {* display: inline;}/* solution: add the inline attribute for ie6 7 to render it as an inline element */
</Style>
</Head>
<Body>
<Div id = "example">
<Ul>
<Li> 1 </li>
<Li> 1 </li>
</Ul>
</Div>
</Body>
</Html>
The following is an example:
Css code
?
. Head {
Width: Pixel px;
Padding: 20px;
Margin: 0 auto;
Border: 1px solid #000;
}
. Logo {
Background: url (images/logo.jpg) no-repeat;
Width: Pixel px;
Height: 42px;
Display: inline-block;
Text-indent:-999em;
Overflow: hidden;
Direction: ltr;
}
Html structure
<Div class = "head"> <a class = "logo" href = "#"> logo </a> </div>
Ie6 in firefox, and the image disappears.
Modified css code
| The code is as follows: | Copy code |
. Logo { Background: url (images/logo.jpg) no-repeat; Width: Pixel px; Height: 42px; Display: block;/* float: left ;*/ Text-indent:-999em; Overflow: hidden; Direction: ltr; } |
|
Firefox screenshot ie6 screenshot
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
