Question

我有一个水平导航的无序列表

代码就是这样的

   <ul class="headul">
      <li class="headli"><a href="#"><img src="Images/2_03.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_04.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_05.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_06.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_07.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_08.jpg"/></a></li>
   <li class="headli"><a href="#"><img src="Images/2_09.jpg"/></a></li>
   </ul>

CSS

     .headul {
        display:block;
        padding:0px
            }

      .headli {
        list-style:none;
        display:block;
        letter-spacing:0;
        float:left;
        border:0px;
            }

      .headli a {float:left;
            display:block; 
            letter-spacing:0;
            float:left;
            border:0;
            }

我已经尝试过float：left，display：inline，display：block，display：inline-block等，

我也尝试删除html li元素之间的空格。（即将所有li元素放在html代码中的同一行）

我也试过字母间距：0，字体大小：0表示ul，li以及li a

它在chrome和mozilla上看起来很棒但是在IE中所有li元素之间有一点空间......好像IE正在给它们一些px或者其他东西...此外它在IE9上发生..（i使用IE测试器测试早期版本的IE，但今天出于某种原因它在测试IE7时仍然崩溃）

Answer 1

为图片创建新的css

.headli a img
 {
    border:none;
    margin:0;
    padding:0;

 }

Answer 2

确保没有影响任何ul子元素的其他样式规则。 IE9默认情况下不会导致此类行为，所以我怀疑它的某些css会影响这些li，a，img元素的外观。

IE中的图片有时会有边框 - 尝试将它们设置为border: 0 none;。

如果您的列表项是内联的，则html标记之间的空格可以将它们分开。

Answer 3

你确定额外的空间来自li元素吗？我的经验是，如果图像不是“显示：阻止”，那么图像有时会产生奇怪的1px间隙......

尝试在LI内的图像上设置“display：block”。这可能有效：）

Answer 4

试试这个，为img添加了css

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.headul {
        display:block;
        padding:0px;
        border:0px;
        margin:0px;
        }

      .headli {
        list-style:none;
        display:block;
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }

      .headli a {
        float:left;
        display:block; 
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }

      .headli a img{
        float:left;
        display:block; 
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }
</style>
</head>
<body>
 <ul class="headul">
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
   </ul>
</body>
</html>

更改前

enter image description here

更改后

enter image description here

删除IE中li元素之间不必要的空格

4 个答案: