Compatibility issues with Inline-block
Compatibility:
IE6, IE7 do not recognize Inline-block but can trigger block elements.
Other mainstream browsers support Inline-block.
Ways to resolve IE6, IE7 compatibility:
1, the first set Inline-block trigger block elements, with layout characteristics, and then set Display:inline to render the block elements inline elements, at this time layout characteristics will not disappear.
2, directly set Display:inline, use Zoom:1 trigger layout.
All browsers are compatible with the following methods:
Display:inline-block;
*display:inline;
*zoom:1;
Official explanation: The object is presented as an inline object, but the object's contents are rendered as a block object. Adjacent inline objects are presented in the same line, allowing spaces.
According to this explanation: supported browsers have (ie8,ie9,chrome,firefox3.6+, because I was tested with firefox3.6), IE6,IE7 does not support this attribute.
How does ie6,7 support this attribute?
For block-level elements, direct the block-level elements into rows, and then trigger the layout. {display:inline;zoom:1}, some students may say, how to say ie6,7 do not support this element?
Don't I often use this attribute under ie6,7 's a tag and span? Also played a role, there may be a misunderstanding here, the use of Display:inline-block is triggered by the layout reason.
Another way is to trigger the layout attribute of the block-level element first, and then let him become an inline element to show it. such as P element, you can write P{display:inline-block}p{display:inline}
What can display:inline-block be used for?
Can do a lot of things can be written at the top of the menu, you can mix the text, can be embedded block elements, can also be as inline elements, you can do information cards, such as Baidu space to pick up on the cards of the People's Day of the fixed width of the day of the writing, of course, Same, I think the most essential is to use it to make the elements inline objects, but the content to do block presentation. We should keep this in mind. As long as we understand the essence of it, we can status quo and even create our own things.
What should you pay attention to when using it?
There are line breaks between the elements that use Display:inline-block, and the space gap problem.
1. After the block element is set Display:inline-block, the ie6,7 has no space problem. Other browsers are available. As shown in the following illustration:
Ie8,ie9,firefox can be solved by using font-size:0, but Chrome is a tragedy. There is still a blank, I am using the chrome10. cannot be cleared. You can add the Letter-spacing property by adding
To solve this problem, we suggest that the author try to solve it. The value I set is -8px just to clear the blanks. I'm worried that there will be a problem with each other. Then I turned the value up to -28px, and sure enough, there was an overlay in chrome, but not in other browsers. It can be seen that the solution to this problem is mainly chrome.
2. After the inline element is set Display:inline-block, all browsers have a newline, blank gap problem.
As shown in the following illustration:
All browsers, ie6,7,8,9 Chrome,firefox are blank,
How to solve it. Add letter-spacing:-8px directly to the contained elements; Can.
Finally attach the code I studied:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312"/>
<style type= "Text/css" >
* {margin:0; padding:0}
#doc {width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 Arial;
#doc h4 {border-bottom:1px solid #000; margin:10px 0px;}
Dib{display:inline-block}
Div{display:inline-block;}
Div{display:inline;}
ul{letter-spacing:-8px;}
UL Li{display:inline;zoom:1;}
</style>
<title></title>
<body>
<div id= "Doc" >
Research <div class= "DIB" > Test support for this property 1</div>
<div class= "DIB" > Test support for this property 2</div>
</div>
<ul >
<li></li>
<li></li>
</ul>
<div style= "LETTER-SPACING:-8PX;" >
</div>
</body>
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
