div在IE中的列表對齊問題

Question

我的li標記中有一個div，它在IE中的所有瀏覽器中都顯示正確對齊。

在IE中，出於某些原因，它決定將數字置於div之上。 這是紗布。

IE瀏覽器：

其他所有瀏覽器（在這種情況下為Chrome）：

碼：

HTML是用以下php生成的：

//iterate the new ordered array and echo html
foreach($sort_array as $ID=>$val)
{
//get the title and author
$query = "SELECT ID, TITLE, SUBTITLE FROM $usertable WHERE ID='{$ID}'";
$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
//echo the data with html formating
echo '
    <li>
        <div class="article">
            <a href="/Articles/' . $row["ID"] . '">
                <h2>' . $row["TITLE"] . '</h2>
                <h3>' . $row["SUBTITLE"] . '</h3>
            </a>
        </div>
    </li>
';      
}

這里確實沒有CSS會影響格式。 只是字體大小，顏色和底邊距。

Answer 1

嘗試將display inline屬性添加到您的元素。

display: inline;

要么

display: inline-block;

Answer 2

可以為您提供相同的CSS嗎？
並且可以指定為什么在li內使用div而不是adding style to anchor tag或placing a child ul inside li嗎？