`

标签<li> 引起的缩进问题 list-style: none outside none;

 
阅读更多

一般网站css都有相应的初始化部分，最近遇到一个棘手问题。

li 标签里面的东西，在firefox下正常，而在ie6全部被缩进，而初始化的部分css也有：list-style :  none ;

并且这个li没有相应的id或者class，那么是被什么控制了呢？原来还是初始化部分的问题：应该为：list-style :  none outside none ;兼容才是正解。在这不妨要夸奖一下，firebug这个插件，本来我这原始的css就是： list-style :  none ; 但在firebug里面被解析为：list-style :  none outside none ; 也就是相当于自动优化了吧。

最后到处看看大网站的li初始化，原来都是outside！

另外：overflow:hidden；white-space:nowrap;可以防止文本过长自动换行。

分享到：
| JS获取浏览器高度和宽度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    " data-report-query="utm_medium=distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Paid-1-87701332-iteye_blog-1180481.nonecase&depth_1-utm_source=distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Paid-1-87701332-iteye_blog-1180481.nonecase" data-report-click='{"mod":"popu_708","dest":"https://download.csdn.net/download/weixin_51225684/87701332","strategy":"2~default~OPENSEARCH~Paid","extra":"{\"utm_medium\":\"distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Paid-1-87701332-iteye_blog-1180481.nonecase\"}"}' > 同步任务顺序： <li>1.console.log("script- 111");</li>

    &lt;li&gt;1.console.log("script- 111");&lt;/li&gt; &lt;li&gt;2.console.log("asynce1-111");&lt;/li&gt; &lt;li&gt;3.console.log("async2-111");---然后跳出整个async1函数来执行后面js栈的代码&lt;/li&gt; &lt;li&gt;4.console.log("promise1-111");...

    博客 网页制作

    "&gt;&lt;ul id="ul1"style="list-style:none;"&gt; &lt;li&gt;我的博客&lt;/li&gt; &lt;li&gt;精彩看点&lt;/li&gt; &lt;li&gt;出行交通&lt;/li&gt; &lt;li&gt;饮食卫生&lt;/li&gt; &lt;li&gt;行走见闻&lt;/li&gt; &lt;li&gt;经典摄影&lt;/li&gt; &lt;li&gt;旅游购物&lt;/li&gt; &lt;li&gt;博客讨论&lt;/li&gt; &lt;li&gt;关于我&lt;/li&gt; ...

    CSS+DIV制作导航条

    &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt; &lt;!---------------------------------------------&gt; &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;!--二级--&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;B1&lt;/a&gt;&lt;!--3级--&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;B12&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; ...

    H5 jQuery商品分类导航菜单切换代码.zip

    &lt;li data-id="1"&gt; &lt;span&gt;美妆/个人护理&lt;/span&gt;&lt;/li&gt; &lt;li data-id="2"&gt; &lt;span&gt;手机 /数码 /电脑办公&lt;/span&gt;&lt;/li&gt; &lt;li data-id="3"&gt; &lt;span&gt;零食 /茶酒 /进口食品 &lt;/span&gt;&lt;/li&gt; &lt;li data-id="4"&gt; &lt;span&gt;母婴玩具 &lt;/...

    精美浮动代码及图片

    &lt;li style="display: list-item;"&gt; &lt;div style="margin-left: -5px;" class="fxbox"&gt; &lt;a href="#" class="fxboxcon" target="_blank"&gt; &lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li style="display: list-item;"&gt; &lt;div style=...

    jQuery电影胶卷风格带缩略图幻灯片轮播特效.zip

    &lt;li data-sPic="images/small1.jpg"&gt; &lt;img &gt; &lt;/li&gt; &lt;li data-sPic="images/small2.jpg"&gt; &lt;img &gt; &lt;/li&gt; &lt;li data-sPic="images/small3.jpg"&gt; &lt;img &gt; &lt;/li&gt; &lt;li data-sPic="images/small4.jpg"&gt; &lt;img &gt; &lt;/...

    翻页效果，鼠标悬停的时候放大

    &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt; ...

    好看的下拉菜单

    &lt;li&gt;&lt;a href="../mozilla/content.html" title="Using content:"&gt;content:&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="../mozilla/moxbox.html" title=":hover applied to a div"&gt;mozzie box&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="../mozilla/rainbow....

    雅虎TAB效果代码 Javascript实现

    list-style:none; position:relative;} #tabs ul li {float:left; display:inline; width:125px; height:53px; margin:0 4px;} #tabs ul li a.outer {display:block; width:125px; height:49px; border-bottom:1px ...

    jquery 图片轮播

    "&gt;1&lt;/li&gt;&lt;li style="list-style: none outside none; float: left; width: 18px; height: 18px; border-width: 1px; border-color: rgb(153, 153, 153); border-style: solid; background: none repeat scroll 0% 0%...

    学生网页制作

    &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/ad4.jpg" thumb="" alt="" text="详细描述4" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/ad3.jpg" thumb="" alt="" text="详细描述5" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;

    h4界面开发

    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;党务政务公开&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;规划动态&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;政府信息公开&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;网上服务&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ...

    jquery实现多级下拉菜单源码

    &lt;/a&gt;&lt;/li&gt; &lt;li class="yahoo"&gt;&lt;a href="http://keleyi.com"&gt;导航菜单&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="http://keleyi.com/a/bjac/veugsmw9.htm"&gt;导航菜单二级分类 &raquo;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="http://keleyi.com"&gt;1&lt;/a&gt;&lt;/...

    网页特效

    &lt;li class="top"&gt;&lt;a href="#" class="top_link"&gt;&lt;span&gt;我的音乐盒&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="top"&gt;&lt;a href="#" class="top_link"&gt;&lt;span&gt;我的介绍&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="top"&gt;&lt;a href="#" class="top_link...

    js星级评论打分效果

    &lt;li&gt; &lt;a href="javascript:;"&gt;1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;2&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;3&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;4&lt;/a...

    菜单修改版

    &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;JAVA&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;SSH&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;前段设计&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;PHP&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;ASP&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a...

    CSS的ul和li实现横向排列和去掉li的点

    list-style:none; } 顺便拓展一下li的list-style： 复制代码代码如下: ul { list-style:square inside url(‘…/.img’); } ul { list-style:circle; } ol { list-style:upper-roman; } ol { list-style:lower-...

    struts_jstl

    stl的配置方法：&lt;br&gt;1、将jstl.jar和standard.jar拷贝到web-inf/lib下即可（如只使用EL表达式，无需引用这两个包）&lt;br&gt;&lt;br&gt;2、在jsp页面头部引入taglib方法如下：&lt;br&gt; &lt;%@ taglib prefix="c" uri=...

    u=3083571013,2480410743&fm=26&gp=0.jpg.png

    &lt;li&gt;&lt;a href="#"&gt;电影排行榜&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;音乐&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;新歌首播&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;华语&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;欧美&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;...

    非常漂亮的TAB效果

    &lt;li style="display:none"&gt; &lt;img src="images/Angus Chipotle BBQ Bacon.png"/&gt; &lt;div class="info"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt; &lt;/li&gt; &lt;li style="display:none"&gt; &lt;img src="images/Quarter Pounder with Cheese.png" /&gt; ...

Magicbox
Global site tag (gtag.js) - Google Analytics