Why Doesn\'t Inline-Block Work Properly in IE8?-CSS Tutorial-php.cn

Why Doesn\'t Inline-Block Work Properly in IE8?

Susan Sarandon

Release： 2024-10-29 05:59:02

Original

566 people have browsed it

Why Doesn't Inline-Block Work Properly in IE8?

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>

Copy after login

<code class="html"><span>I would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul></code>

Copy after login

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>

Copy after login

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!