0

以下のコードで、番号1とコンテンツの間のスペースが少し広いことがわかりましたDIY SMS Export V1.05がリリースされました.CSSで番号とコンテンツの間のマージンを設定するにはどうすればよいですか?

さらに、Web ページには、次の画像のように IE 10.0 と FireFox 21.0 の両方で同じ UI があります。

ここに画像の説明を入力

IE 10.0互換モードではUIが以下の画像のように変わりました。左マージンが増えたのはなぜですか？

ここに画像の説明を入力

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
       li.A {
          list-style-type: decimal;
          font-weight: bold;
           margin-bottom:15px;          
        }

        li.B{
          list-style-type:upper-alpha;
          font-weight:normal;
          margin-top:4px;
          margin-bottom:4px;   

        }

        ol.C {

        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ol>
            <li class="A">DIY SMS Export V1.05 has been released
                <ol class="C">
                    <li class="B">Add the function to delete sms selected</li>
                </ol>
            </li>

            <li class="A">DIY SMS Export V1.04 has been released
                <ol class="C">
                    <li class="B">Add chinese language support</li>
                </ol>
            </li>
        </ol>  
    </div>
    </form>
</body>
</html>
4

1 に答える 1

1

HTML5 より前の HTML4.01 では、ユーザー エージェントのデフォルト CSS は提案されただけでした。リスト、特にリスト内のリストに必要なインデントは、Firefox と IE (つまり、Netscape と IE を意味します...) を使用して、margin-left: 40pxまたはそれらの中で実現されました。padding-left: 40px

したがって、このコードペンのように軽いリセットを行うと、違いが処理されます。

CSS

ol, ul, li {
  margin: 0;
  padding: 0;
}
ol, ul {
  margin-left: 20px;
}
于 2013-07-01T02:12:15.413 に答える