• 标签内设置list-style-type:disc样式后,为什么在IE11和火狐浏览器显示效果不一样?怎么使ie11显示成火狐的样子
  • 在<li>标签内设置list-style-type:disc样式后,为什么在IE11和火狐浏览器显示效果不一样?如何使ie11显示成火狐的样子?
    有下面几句html语句:

           <div class="divHead" style="border: 1px solid #c8c8c8;">
                <h2   style=" color:#ffffff">
                   国家排名列表
                </h2>
          </div>
          <div class="divBody" >
                <ul class="cList"style=" text-align:center"  >
                    <li style="list-style-type:disc;"><a href="void(0);"  >美国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);">中国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);">日本</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);"  >德国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);"  >法国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);" >英国</a> </li>
                </ul>
          </div>

    执行这些语句后,在火狐浏览器中显示效果如下图:
    在<li>标签内设置list-style-type:disc样式后,为什么在IE11和火狐浏览器显示效果不一样?怎么使ie11显示成火狐的样子

    执行这些语句后,在IE11浏览器中显示效果如下图(国家前面的小圆点跑到div的外边了,这个不是我想要的,想该成火狐浏览器显示的那个样子):
    在<li>标签内设置list-style-type:disc样式后,为什么在IE11和火狐浏览器显示效果不一样?怎么使ie11显示成火狐的样子

    请问:如何使ie11浏览器(win7操作系统)显示成火狐浏览器显示的那个样子?


    ------解决方案--------------------
    也许你会考虑如下的实现方式,但是,一般都不会拿默认样式来是实现某种效果,比如前面那个原点,是有兼容问题的,一般都拿背景图来处理
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    ul{margin:0;padding:0;}
    a{ text-decoration:none;}
    .cList {width:100px;margin:0 auto;}
    .cList li{list-style-type:disc;}
    .divBody{ width:300px;background:#FC0;margin:100px auto;}

    </style>
    </head>

    <body>
    <div class="divBody" >
                <ul class="cList" >
                    <li style="list-style-type:disc;"><a href="void(0);"  >美国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);">中国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);">日本</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);"  >德国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);"  >法国</a> </li>
                    <li style="list-style-type:disc;"><a href="void(0);" >英国</a> </li>
                </ul>
          </div>
    </body>
    </html>