首页 > 文章 > web前端 > chrome浏览器li使用float:left错位的情况_html/css_WEB-ITnose

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

WBOY原创: 2016-06-24 11:37:301416浏览

在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后面的空格删掉，全都是被这个空格引起的

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

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

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

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

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

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

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

声明：

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

上一篇：css持续积累_html/css_WEB-ITnose下一篇：The CSS position property_html/css_WEB-ITnose

查看更多

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

回复讨论(解决方案)

相关文章