2

IE7 のリスト アイテム間のギャップを削除できません。

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="base.css" />
    </head>
    <body>
        <ul>
            <li>
                <div>row 1.1</div>
                <div>row 1.2</div>
            </li> 
            <li>
                <div>row 2.1</div>
                <div>row 2.2</div>
            </li> 
            <li>
                <div>row 3.1</div>
                <div>row 3.2</div>
            </li> 
        </ul>
    </body>
</html>

CSS:

ul
{
    padding: 0px;
    margin: 0px;    
}

li
{
    list-style-type: none;      
    width: 100%;    
    margin: 0px;
    padding: 0px;   
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;          
}

li:first-child
{
    border-top: 1px solid black;
}

li div
{
    float: left;
    width: 49.9%;
}
4

3 に答える 3

8

liあまりにも浮かぶ

li
{
    list-style-type: none;      
    width: 100%;
    float: left;    
    margin: 0px;
    padding: 0px;   
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;          
}

これにより IE7 が修正されます (これは IE7 の既知の問題です) が、他のブラウザーにも子フロートが同時に含まれるようになります (これは行われませんでした)。

追加: ###作業例###

于 2011-03-31T10:43:46.527 に答える
2

IE はここでは問題ではありません。
何が起こるかというと、実際には、各リスト項目の間に「\n\t\t\t」を含むテキスト ノードがあり、これらは分割できないスペースではないため、IE はそれらを 1 つの「 」として解釈します。
ほとんどの場合、IE に関する問題は、IE が仕様に従っているという事実によって引き起こされますが、人々はそうではありません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="base.css" />
    </head>
    <body>
        <ul>
            <li>
                <div>row 1.1</div>
                <div>row 1.2</div>
            </li><li>
                <div>row 2.1</div>
                <div>row 2.2</div>
            </li><li>
                <div>row 3.1</div>
                <div>row 3.2</div>
            </li>
        </ul>
    </body>
</html>
于 2012-04-27T13:17:58.390 に答える
0

また：

<!--[if lte IE 7]>
li {
...
margin-bottom: -3px;
...
}
<![endif]-->
于 2013-03-06T17:24:53.800 に答える