Home >Web Front-end >CSS Tutorial >Why Doesn\'t Inline-Block Work Properly in IE8?
Why Doesn\'t Inline-Block Work Properly in IE8?
- Susan SarandonOriginal
- 2024-10-29 05:59:02535browse
IE8 Display: Inline-block Error Solved
In IE8, despite its apparent support for inline-block, some users encounter issues with inline display. To resolve this problem, ensure a doctype is declared before the HTML tag.
The following code demonstrates the usage of inline-block in IE8:
<code class="css">span, ul, ul li {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
list-style: none;
}</code>
<code class="html"><span>I would want</span> <ul> <li>this</li> <li>on</li> <li>one line.</li> </ul></code>
This code is intended to align the span and list elements inline, as seen in browsers like Google Chrome. However, IE8 users may experience incorrect alignment due to the lack of a doctype. To ensure proper display in IE8, add the following declaration as the first line of your code:
<code class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code>
This doctype informs IE8 that the document adheres to the HTML5 standard, resolving the display issue and aligning the elements correctly as intended.
The above is the detailed content of Why Doesn\'t Inline-Block Work Properly in IE8?. For more information, please follow other related articles on the PHP Chinese website!