chrome浏览器li使用float:left错位的情况_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:37:30
原创
1459 人浏览过

在IE下都正常,没有任何问题,但是在chrome(版本 45.0.2454.85 m)下却出现这样错位的情况,找不到是什么原因造成的。

假如不用float:left,从第5个li开始,也会有空白的情况,有谁遇到过这种情况,是什么原因引起的?



以下是代码:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>chrome浏览器li出现空白错位</title><style type="text/css">*{margin:0;padding:0}li{list-style:none;}a{color:#333; text-decoration: none;}.main{width:980px;margin:0 auto;overflow:hidden;}.link ul{overflow:hidden;}.link li{float:left;line-height:28px;height:28px;overflow:hidden;background-color:#ccc;font-size:12px;padding:0 12px;}</style></head><body><div class="main"><div class="link">	<ul>		<li><a href="#" target="_blank">合肥文明网</a></li>		<li><a href="#" target="_blank">淮北文明网</a></li>		<li><a href="#" target="_blank">亳州文明网</a></li>		<li><a href="#" target="_blank">宿州文明网</a></li> 		<li><a href="#" target="_blank">蚌埠文明网</a></li> 		<li><a href="#" target="_blank">阜阳文明网</a></li> 		<li><a href="#" target="_blank">淮南文明网</a></li> 		<li><a href="#" target="_blank">滁州文明网</a></li> 		<li><a href="#" target="_blank">马鞍山文明网</a></li> 		<li><a href="#" target="_blank">芜湖文明网</a></li> 		<li><a href="#" target="_blank">宣城文明网</a></li> 		<li><a href="#" target="_blank">铜陵文明网</a></li> 		<li><a href="#" target="_blank">池州文明网</a></li> 		<li><a href="#" target="_blank">安庆文明网</a></li> 		<li><a href="#" target="_blank">黄山文明网</a></li> 		<li><a href="#" target="_blank">歙县文明网</a></li> 		<li><a href="#" target="_blank">祁门文明网</a></li> 		<li><a href="#" target="_blank">休宁文明网</a></li> 		<li><a href="#" target="_blank">黟县文明网</a></li> 		<li><a href="#" target="_blank">黄山区文明网</a></li> 		<li><a href="#" target="_blank">包河文明网</a></li> 		<li><a href="#" target="_blank">肥西文明网</a></li> 		<li><a href="#" target="_blank">蜀山文明网</a></li> 		<li><a href="#" target="_blank">庐江文明网</a></li> 		<li><a href="#" target="_blank">颍上文明网</a></li> 		<li><a href="#" target="_blank">阜南文明网</a></li> 		<li><a href="#" target="_blank">鸠江区文明网</a></li> 		<li><a href="#" target="_blank">弋江区文明网</a></li> 		<li><a href="#" target="_blank">芜湖县文明网</a></li> 		<li><a href="#" target="_blank">宁国市文明网</a></li> 		<li><a href="#" target="_blank">绩溪文明网</a></li> 		<li><a href="#" target="_blank">凤台文明网</a></li> 		<li><a href="#" target="_blank">大通文明网</a></li> 		<li><a href="#" target="_blank">田家庵区文明网</a></li> 		<li><a href="#" target="_blank">怀远文明网</a></li> 		<li><a href="#" target="_blank">桐城文明网</a></li> 		<li><a href="#" target="_blank">怀宁文明网</a></li> 		<li><a href="#" target="_blank">望江文明网</a></li> 		<li><a href="#" target="_blank">涡阳文明网</a></li> 		<li><a href="#" target="_blank">蒙城文明网</a></li> 		<li><a href="#" target="_blank">宣州区文明网</a></li> 		<li><a href="#" target="_blank">六安文明网</a></li> 		<li><a href="#" target="_blank">铜陵县文明网</a></li> 		<li><a href="#" target="_blank">贵池区文明网</a></li> 		<li><a href="#" target="_blank">铜官山区文明网</a></li> 		<li><a href="#" target="_blank">毛集文明网</a></li> 		<li><a href="#" target="_blank">长丰文明网</a></li> 		<li><a href="#" target="_blank">肥东文明网</a></li> 		<li><a href="#" target="_blank">濉溪文明网</a></li> 		<li><a href="#" target="_blank">潘集区文明网</a></li> 		<li><a href="#" target="_blank">利辛文明网</a></li> 		<li><a href="#" target="_blank">泾县文明网</a></li> 		<li><a href="#" target="_blank">广德文明网</a></li> 		<li><a href="#" target="_blank">来安文明网</a></li> 		<li><a href="#" target="_blank">明光文明网</a></li> 		<li><a href="#" target="_blank">宿松文明网</a></li> 		<li><a href="#" target="_blank">南谯区文明网</a></li> 		<li><a href="#" target="_blank">定远文明网</a></li> 		<li><a href="#" target="_blank">南陵文明网</a></li> 		<li><a href="#" target="_blank">凤阳文明网</a></li> 		<li><a href="#" target="_blank">琅琊区文明网</a></li> 		<li><a href="#" target="_blank">临泉文明网</a></li> 		<li><a href="#" target="_blank">颍东区文明网</a></li> 		<li><a href="#" target="_blank">颍州区文明网</a></li> 		<li><a href="#" target="_blank">全椒文明网</a></li> 		<li><a href="#" target="_blank">天长文明网</a></li> 		<li><a href="#" target="_blank">巢湖文明网</a></li> 		<li><a href="#" target="_blank">镜湖区文明网</a></li> 		<li><a href="#" target="_blank">太和文明网</a></li> 		<li><a href="#" target="_blank">当涂文明网</a></li> 		<li><a href="#" target="_blank">和县文明网</a></li> 		<li><a href="#" target="_blank">泗县文明网</a></li> 		<li><a href="#" target="_blank">砀山文明网</a></li> 		<li><a href="#" target="_blank">?桥文明网</a></li> 		<li><a href="#" target="_blank">界首市文明网</a></li> 		<li><a href="#" target="_blank">颍泉区文明网</a></li> 		<li><a href="#" target="_blank">芜湖经开区文明网</a></li> 		<li><a href="#" target="_blank">岳西文明网</a></li> 		<li><a href="#" target="_blank">霍山文明网</a></li>	</ul></div></div></body></html>
登录后复制


回复讨论(解决方案)

你把每一个li后面的空格删掉,全都是被这个空格引起的

你把每一个li后面的空格删掉,全都是被这个空格引起的


使用float:left之后就不存在空格问题了吧,而且每个li空格都一样的,不使用float:left,从第5个开始才有空白,要说有空白就全部都有,为什么前面4个没有,第5个开始才有

你把每一个li后面的空格删掉,全都是被这个空格引起的


原来在后面真有一个不可见的字符,那个看起来像是空格,但不是空格的,谢谢


你把每一个li后面的空格删掉,全都是被这个空格引起的


原来在后面真有一个不可见的字符,那个看起来像是空格,但不是空格的,谢谢
不知道这个是什么字符,使用notepad++的移除行尾空白移不掉,只能移普通的空格。



你把每一个li后面的空格删掉,全都是被这个空格引起的


原来在后面真有一个不可见的字符,那个看起来像是空格,但不是空格的,谢谢
不知道这个是什么字符,使用notepad++的移除行尾空白移不掉,只能移普通的空格。 那是一个全角的空格
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板