The css inline-block attribute is compatible with various browsers and the solution to the horizontal gap problem

This chapter will introduce to you the css inline-block attribute that is compatible with various browsers and the solution to the horizontal gap problem. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

inline-block attribute description:

After setting this value, the object itself is rendered as an inline object, but the object The content within is rendered as block boxes. In other words, the element with this value set is equivalent to an inline box element that can contain block boxes. Although IE6 and 7 can support inline-block, in their eyes, display:inline-block is only a condition for triggering layout, not something specified by W3C. However, we can just use IE's layout to simulate the effect of display:inline-block.

inline-block Compatibility solutions for various browsers

There are two methods, both trigger the IE layout first, and then define the display :inline, let the block element itself be rendered as an inline object, as follows:

1. Among all the attributes that can trigger layout, after excluding position:absolute and float, as well as width and height, the only ones that can be used are display:inline-block, as follows:

fn-ib{display:inline-block;}fn-i{*display:inline;}

Note that the two displays must be placed in two CSS statements one after another to have an effect. If display:inline-block is defined first, then set the display back to inline. Or block, layout will not disappear.

2. The first method should be placed in two CSS statements. Sometimes you may make a mistake if you are not careful. The layout of IE also has zoom:value. The code is as follows:

fn-ibz{display:inline-block;*display:inline;*zoom:1}

From the above we can see that IE6 and 7 support the inline-block attribute, but they do not achieve the W3C effect, so we use layout and display:inline to simulate the effect of the inline-block attribute.

Okay, now there is a solution to solve the inline-block of each browser. The next solution is: look at the following example under different browsers:

The gap between inline-block elements in different browsers is the nature of inline itself, not a bug

Then we found that in browsers that support the display:inline-block attribute, the inline and block elements display:inline -block will produce horizontal gaps; and in IE67 and IE (Q), there are two situations after simulating display:inline-block: block elements after simulation have no gaps, while inline elements have gaps. Why? Here is another knowledge point: inline elements are arranged with gaps by default. Therefore, the above phenomenon is explained as follows:

For browsers that support the display:inline-block attribute, the element itself is equivalent to the inline element, so there are gaps in modern browsers; in the simulated solution, Because although setting display:inline on block elements can make them arranged horizontally like inline elements, block elements are still block elements and will not really become inline elements, so there will be no gaps.

The root cause of gaps is that characters such as line breaks, spaces, tabs, etc. in HTML produce whitespace characters.

Solution to the horizontal gap problem between inline-block

We know above that the root cause of the gap is the newline character in HTML. Characters such as spaces and tabs. If we remove the spaces between labels, will there be no problem? So the code is as follows:

HTML code is as follows:

<div class="parent">
    <strong class="fn-ibz">内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong>
</div>
<div class="parent">
    <div class="fn-ibz">块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div>
</div>

Rendering:

Change the DOM structure to solve the problem between inline-block Gap problem

I have processed the above DEMO code, so we cannot see the gap. But here’s the problem:

If it’s static, there’s really no problem with doing this. What if it’s generated directly in the background? Or in the future, maintenance colleagues will see how the code is written this way and change it back. So using CSS to solve it is still the best way. When I first saw this situation, my first reaction was to use negative margins to solve it. Later, after I learned the root cause of the gap, I felt that although the negative margin method could solve the problem, it did not give the right solution. The cause of the gap was the line breaks between HTMl. characters such as symbols, spaces, tabs, etc., and the gaps will change with changes in attributes such as font size. So you can use CSS to control the character size to find one. So referring to the solution in YUI3, I got the following code:

.f-w-p-parent{
    font-size:0;
    letter-spacing:-4px;
    *letter-spacing:normal;
    *word-spacing:-1px;
}
.f-w-p-inner{
    font-size:12px;
    letter-spacing:normal;
    *word-spacing:normal;
    vertical-align: top;
}

Rendering:

CSSinline-block gap solution

Then we analyze the function of each line of code:

1. The role of font-size: Since it is caused by characters, of course, set their font-size to 0, and then set the font-size within the element back to its original size. Except for IE6, 7 and other browsers with lower versions of chrome and Safari, the inline-block gap disappears at this step (lower versions of chrome cannot allow text to expand and contract freely after setting font-size:0, so it is not recommended)

2. The role of word-spacing: In IE6, 7 and IE (q) mode, there is always a spacing of 1px, and then we use word-spacing:-1px to solve (between words The distance between them is only useful for English, Chinese does not have the concept of words), and then returns the element to normal. Of course, it is also possible to use margin:0 0 0 -1px; (it seems that there is still less code...)

3. The role of letter-spacing: only low versions of chrome and Safari are left. , letter-spacing is to adjust the spacing between words, because letter-spacing, font-size, font-family and even different browsers are different, so according to the "Data Table on the Relationship between Letter-spacing and Font Size/Font" By setting the above data, the gap can be canceled. Then because letter-spacing and word-spaacing are easy to cause trouble together, I added *letter-spacing:normal; This code.

4. The role of vertical-align:top: The last one has nothing to do with gaps. Setting vertical-align:top is to align the inline-block elements with the top baseline. The vertical-align attribute is only valid on inline and inline-block elements.
   

Advantages of inline-block

I won’t say here that inline-block layout saves browsing compared to floating layout To reduce server resources, we have to abandon floating layout and embrace inline-block layout (and the official website does not say this). After all, the appearance of a thing has its meaning, and floating layout is also the most recognized layout method. So again, the specific situation is analyzed in detail. It is clear that the floating layout structure is clearer, but you have to use inline-block and add a lot of redundant code. Even if the inline-block layout is really the least resource-consuming as legendary , but wouldn’t the increase in your html code also consume resources?

Even if there is, I don’t think it’s big. So if you use absolute positioning, use absolute positioning. If you use floating, use floating. If you encounter a situation where using inline-block can solve the problem better, then use it boldly. After all, inline-block still has some advantages compared with floating and absolute positioning.

1. You can use vertical-align and text-align to achieve vertical, horizontal, both sides, baseline, etc. alignment, and it is also adaptive.

2. Because of its own reasons, it is particularly suitable for fluid layout. The height and width don't need to be fixed.

The above is the detailed content of The css inline-block attribute is compatible with various browsers and the solution to the horizontal gap problem. For more information, please follow other related articles on the PHP Chinese website!