Question

我创建了一个从开始高度过渡到更高高度的div，显示了一个列表。它在web-kit浏览器中看起来很好，但在Firefox中，div看起来很短，切断了列表的底部。

我尝试在em中设置div高度，希望div然后将高度与列表中使用的字体大小相匹配。仍然发生同样的事情。

有什么想法吗？

CSS：

#nav{
        padding:0;
        position:fixed;
        top:27px;
        left:27px;
        font-family:arial;
        font-size:10px;
        background-color:#ccc;
        width:11.3em;
        height:5.5em;
        overflow:hidden;
        transition: height .5s;
        -webkit-transition: height .5s; /* Safari */
    }
    #nav:hover{
        height:22em;
    }
    #nav a.bg:hover{
       background-color: #ccc;
    }
    #nav a{
       text-decoration:none;
       color:#000;   
    }
    #nav a:hover{
       background-color:#6a6a6a;

    }

HTML：

<div id="top">
    <div id="nav">
        <!--logo_image-->

            <a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>

        <!---->

            <div style="height:1em;"></div>
            <div style="font-size:1.1em;"><b>Artists</b></div>
            <div style="height:1em;"></div>
            <div><a href="#">Ahnnu</a></div>
            <div><a href="#">Gem Vision</a></div>
            <div><a href="#">Dope Body</a></div>
            <div><a href="#">Co La</a></div>
            <div><a href="#">Teenage Souls</a></div>
            <div><a href="#">Kid Krusher</a></div>
            <div><a href="#">Lil Jabba</a></div>
            <div><a href="#">Cex</a></div>
            <div><a href="#">Teeth Mountain</a></div>
            <div><a href="#">Jimmy joe Roche</a></div>

    </div>

</div>

Answer 1

我认为你有两个选择：一种称为CSS重置 - http://html5reset.org/

第二个叫做Normalize。它不是重置所有样式，而是针对需要更改的样式，以便在较小的文件大小中跨浏览器为您提供合理，一致的结果。 http://necolas.github.com/normalize.css/

Firefox的<div>高度渲染问题</div>

1 个答案: