一个在firefox下异常的li显示问题,在IE78等版本都显示正常_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 08:47:10
原创
1095人浏览过


栏目七莫名的会对不齐,真是百思不得其解呀

<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/* css document */* { margin: 0; padding: 0; }body { font-family: "microsoft yahei", verdana;}/* font-family:microsoft yahei*/li { list-style-type: none; }.f12 { font-size: 12px; }.f14 { font-size: 14px; }.fweight{ font-weight: bolder; }/*链接根据页面要求全局自定义*/a { text-decoration: none; color: #666; }a:hover { color: #00a57e; }/*链接绿色*/.width1020{ width: 1000px; margin-right: auto; margin-left: auto; padding-right: 10px; padding-left: 10px; }#nav { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #ddd; border-bottom-color: #ddd;}#nav ul { line-height: 0px; height: 24px; margin-top: 12px;margin-bottom: 12px; background-color: #ff80c0; }#nav li { font-family: "microsoft yahei",verdana; float: left; padding-left: 35px; line-height: 24px; height: 24px; margin-left: 25px; margin-right: 20px; background-color: #ffff80; }</style></head><body><div id="nav" class="width1020">  <ul class="f14 fweight">                                               <li><a href="#">首页</a></li>    <li><a href="#">公司简介</a></li>    <li><a href="#">栏目之三</a></li>    <li><a href="#">栏目之四</a></li>    <li><a href="#">栏目之五</a></li>    <li><a href="#">栏目之六</a></li>    <li><a href="#">栏目之七</a></li>  </ul></div></body></html>
登录后复制

芦笋演示
芦笋演示

一键出成片的录屏演示软件,专为制作产品演示、教学课程和使用教程而设计。

芦笋演示 34
查看详情 芦笋演示


回复讨论(解决方案)

这么诡异的问题不会就我一个人遇到吧

我也遇到过

造成这样的原因,通常是文本节点造成的

哦了,结贴给分

你把你粘贴出来的代码再复制回去看看,就没有问题,就如楼上所说是空格导致的

把#nav li中的 margin-right: 20px; 去掉, margin-left: 25px;改为 44px。。。 但是如果改为45px也会出现你那种情况。。

造成这样的原因,通常是文本节点造成的

哦了,结贴给分

果然,晕死,在DW软件下压根 看不到这空格符,浏览器源码查看也没看出
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号