Home >Web Front-end >HTML Tutorial >chrome浏览器li使用float:left错位的情况_html/css_WEB-ITnose
chrome浏览器li使用float:left错位的情况_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:301482browse
在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++的移除行尾空白移不掉，只能移普通的空格。 那是一个全角的空格
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css持续积累_html/css_WEB-ITnoseNext article：The CSS position property_html/css_WEB-ITnose