Cross-browser inline-block implementation in CSS

When we create a webpage, we sometimes want an element to define its width and height like a block, and to continue to work like a normal inline. For example, the red lines marked in the following figure:

 

We usually use this code to achieve this effect:

 

<A href = "#"> </A>

Although this can achieve the goal, the Code is not refined and flexible enough. The ideal way is to use the following code:

 

<A href = "#"> Yangliu. Name </a>

In this way, we need to specify the width height and background-image for the tag. But the default
The display attribute is inline, and width and height are invalid. If you set
Display: Block, although it can solve the width and height problem, but the element will automatically break the line, unable to achieve the effect we need. Is there any way to implement something similar to IMG?
In this way, the label can set the height and width, and will not automatically cut the line?

The answer is yes. Opera and WebKit support the display: inline-block attribute of css2. Using this attribute, we can achieve the desired effect in opera, but it won't work in other browsers.

The display property also has a less commonly used value display:
Inline-table. Using this value can also completely achieve the desired effect. This attribute is correctly supported by all browsers except IE, ...... Er, again
IE. Although all web developers hate CSS, giving up ie means giving up 70%
So we have to find other solutions.

No, so I had to Google and found the result for me. In this article, it is pointed out that if you first trigger haslayout of IE and then set its
Display: inline. This element will become inline-block! In this way, we can take advantage of the unreasonable features of IE, combined with some
CSS hacks provides CSS code compatible with various browsers:

 

. Element-class { Display:-moz-inline-stack; // Firefox only code Display: inline-block; // some standard browsers Zoom: 1; // ie only * Display: inline; // only ie know this code (CSS hack) }

With this code, you can implement consistent inline-block in various browsers. However, this method has a small defect, that is, it cannot pass
W3C CSS verification. Of course, it is very easy to pass the verification. You can issue a style sheet for the inline-Table attribute to browsers other than IE. for IE
Separate the IE-only CSS.