In IE6/IE7: inline-block solution

Source: Internet
Author: User

Display: inline-block is not supported in IE6 or IE7.

1. When the display attribute of the inline element is set to inline-block, all browsers support it; 2. When the display attribute of the block element is set to inline-block, IE6/IE7 is not supported; The object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same line, with spaces allowed. (To be precise, the elements applying this feature are currently inline objects, and the surrounding elements are kept in the same row, but attributes of block elements such as width and height can be set) In IE, display: inline-block is used for inline elements. ie does not recognize any other elements, but layout is triggered when display: inline-block is used in IE, so that inline elements have display: inline-block attribute characterization. From the above analysis, it is not difficult to understand why setting the display: inline-block attribute for block elements in IE cannot achieve the effect of inline-block. At this time, the block element is only triggered by the display: inline-block layout, and it is a row layout. Therefore, after the block element is triggered, it is still a row layout, instead of submitting an inline object as a block element in opera.   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;}/*Recommendation*/Div{Display:Inline-block;_ Zoom:1;* Display:Inline;}/*Recommendation: ie67*/

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.