解决火狐ff和ie关于使用ul li上下和左右不对其的问题

 

        在设置导航菜单或者产品列表的时候往往喜欢用<ul><ol>来定义，感觉简单便捷，就不用一个层一个层那样的麻烦。但是有时候也会出现自己不想
要的效果，刚开始觉得很难修改。摸索着找到了一些方法，也不知道符合不符合专业规范，总之达到了自己预期的效果了。为了防止遗忘就顺手整
理了下来。

    设置导航菜单。
#q ul {
                margin:0;  
    color: #FFFFFF;
    font-weight: bold;
                list-style-type: none;/***列表前没有标志，默认是“.”***/
}

#q li {
    display: inline;/***列表横排，默认是竖排***/
    
}

#q {
    background-color: #999999;
    height: 80px;
    width: 500px;
}

层

<div id="q">
<ul>
   <li>目的是垂直居中显示</li>
   <li>目的是垂直居中显示</li>
</ul>
</div>

效果
火狐中

IE中  

当margin设置0时，IE会读，火狐却不会读。


#q ul {
                 margin:30px; /***在编辑过程中视觉上居中***/
     color: #FFFFFF;
     font-weight: bold;
                 list-style-type: none;
    
    }
其他的代码不变。
效果
火狐中

IE中  

火狐还是不能正确的读取。

#q ul {
                  margin-top:0px;
      margin-left:0px;
      margin-bottom:0px;
      padding-top:30px;
      padding-left:10px; /***在编辑过程中视觉上达到想要的效果***/
     color: #FFFFFF;
     font-weight: bold;
                 list-style-type: none;
    
    }

其他代码不做改动
效果
火狐中

IE中  

两个浏览器的预览效果都能和编辑过程中的效果一致，成功。

曾经在网上查看过很多关于浏览器不兼容的资料，有些可以有些却怎么都不好用，达不到预期的效果，可能还存在更好的更简单的更专业的方法，但是我自认为最适合自己的方法才是最好的方法。总之达到了我想要的效果就足够了。多多实践才会进步~~~~~