Question

我现在很难让我的页脚导航正常显示，因为我使用了一些新的CSS规则。除了这个问题，IE 9还显示了我的IMG外围有一个边框（很像链接项的下划线）。

问题如下：

为什么IE创建一个边框尽管img {text-decoration：none; }？
页脚怎么样都不知道？我错过了什么？

这是我的jsfiddle：http://jsfiddle.net/misterizzo/fTe5Q/

<

body>
<div id="bg">
   <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
 <div id="header">
  <div id="top-left"><a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a>
  </div>

    <div id="nav">
    <ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
    </div>

<div class="acton">
{{TEXT}}
</div>

<div id="footer">
<ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
</div>
</div>



</div>
</body>

在当前的FF和Chrome浏览器中，一切都很好看（像往常一样）

谢谢！

Answer 1

第一个问题：

您应该使用normalise.css使浏览器行为更加一致。 http://necolas.github.io/normalize.css/

这是你需要的那个文件。

/ ** *在IE 8/9中的a元素内部删除边框。 * /

img {
    border: 0;
}

第二个问题：

尝试增加页脚ul的宽度

#footer ul {
   width: 530px;
}

希望有所帮助。

修复IE显示链接的img / footer nav

1 个答案: