首页  >  文章  >  web前端  >  在<li>标签内设置list-style-type:disc样式后,为什么在IE11和火狐浏览器显示效果不一样?如何使ie11显示成火狐的样子?_html/css_WEB-ITnose

在<li>标签内设置list-style-type:disc样式后,为什么在IE11和火狐浏览器显示效果不一样?如何使ie11显示成火狐的样子?_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:06:141583浏览

有下面几句html语句:

       


            


               国家排名列表
            


      

      

            

                    
  • 美国 

  •                 
  • 中国 

  •                 
  • 日本 

  •                 
  • 德国 

  •                 
  • 法国 

  •                 
  • 英国 

  •             

      


执行这些语句后,在火狐浏览器中显示效果如下图:


执行这些语句后,在IE11浏览器中显示效果如下图(国家前面的小圆点跑到div的外边了,这个不是我想要的,想该成火狐浏览器显示的那个样子):


请问:如何使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>

谢谢“人生难得一只鸡 ”

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn