Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to solve the compatibility problem of cssdisplaynlineblock. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Compatibility:

IE6 and IE7 do not recognize inline-block but can trigger block elements.

Other major browsers support inline-block

Methods to solve the compatibility of IE6 and IE7:

1. First set the inline-block trigger block element, which has the characteristics of layout, and then set display:inline to make the block element present inline elements. At this time, the features of layout will not disappear.

2. Set display:inline directly and use zoom:1 to trigger layout.

The way to be compatible with all browsers is:

CSS Code copies content to the clipboard

Display:inline-block; / * Modern browser + IE6, 7 inline elements * /

* display:inline; / * IE6, 7 block elements * /

* zoom:1

Here is a brief introduction:

1. Demonstrate the effect of an example

2. The function of display:inline-block?

Using the display:inline-block attribute, you can make an inline element or block element become an inline block element. To put it bluntly, you can define your own width and height without adding the float attribute, while making it easy to center the element in the parent element!

3. When will display:inline-block be used?

In a site layout, many times, inline elements such as span or block element li tags are used in child elements and the number of tags varies, and we want this piece to be centered no matter how many (the overall width of the child elements varies)! At this time, display:inline-block can come in handy!

4. Does ie6/7 support the attribute display:inline-block?

Define the display:inline-block attribute on the inline element and find that the display effect in IE6 and IE7 is the same as that in other browsers, but the fact is that ie7 and earlier ie browsers do not support the attribute display:inline-block!

The correct explanation is that "using the inline-block attribute will trigger layout under IE, so the width and height set on the element will take effect, so it will have the same display effect as other browsers." instead of saying that IE6/7 supports display:inline-block!

5. In-line elements only need to define display:inline-block, and the display effect is consistent among browsers. How can block elements under IE7 achieve the effect of display:inline-block?

Under IE, display: inline-block simply triggers the layout of the element. For example, setting display: inline-block to div only ensures that the div has the characteristics of a block element (you can set width, height, etc.), but still produces line breaks. The next step is to set up display: inline so that it does not produce line breaks. If you write display:inline-block;*display:inline; on the same style, the inline-block attribute will not trigger the layout of the element, so we have to add * zoom:1 to trigger the layout!

6. How are block elements compatible with display:inline-block writing under IE7?

There are two practical and effective methods:

Method 1: directly set the block element to inline object rendering (set the attribute display:inline), and then trigger the layout of the block element (such as zoom:1, etc.). The code compatible with each browser is as follows: div {display:inline-block;*display:inline; * zoom:1;...}

Method 2: first use the display:inline-block attribute to trigger the block element, and then define display:inline to render the block element as an inline object (two display have to be placed in two CSS style declarations to have an effect, this is a classic bug of IE, if you define display:inline-block first, and then set display back to inline or block,layout will not disappear). The code is as follows (… For other attribute contents omitted): div {display:inline-block;...} div {* display:inline;}

7. How to solve the problem that extra white space will be generated between display:inline-block elements?

Extra white space is created between display:inline-block elements, which is a feature of inline-block itself!

After reading the above, do you have any further understanding of how to solve the compatibility problem of cssdisplaynlineblock? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.