0

In the following code, I find the space between number 1 and content DIY SMS Export V1.05 has been released is a little width, how can I set the margin between between number and content with CSS?

And more, the webpage have same UI both IE 10.0 and FireFox 21.0 as the following image.

enter image description here

but in IE 10.0 compatible mode, the UI changed as the following image. the left margin increased, why?

enter image description here

<%@ 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。列表，尤其是列表中的列表所需的缩进是通过Firefoxmargin-left: 40px和padding-left: 40pxIE 实现的（我的意思是 Netscape 和 IE ......）

因此，在这个codepen中的轻重置将处理差异。

CSS

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