0

我正在尝试创建一个基本的水平菜单（无下拉菜单）。图像已为菜单创建，但我仍然在菜单右侧看到一个空间。我使用 div 创建了导航。Stack 上的大多数类似问题都是针对使用 UL 和 LI 创建的菜单，这与我的不同。

我的菜单在 IE 中看起来不错，但在 FF、Chrome、Safari 和 Opera 中却不行。（示例链接）谁能解释这是为什么，以及我该如何解决？

  <div style="width: 915px; height:33px;">
     <div  style="width:40px; height:33px; float:left;"><img runat="server" border="0" src="~/_images/_nav/nav_left.jpg" /></div>
    <div style="width:835px; height:33px; float: left; ">
    <div class="mynav" style="width:136px; height:33px; background-image:url(../_images/_nav/nav_student_left2.jpg)" ></div>
    <div class="mynav" style="width:155px; height:33px; background-image:url(../_images/_nav/nav_home2.jpg)"></div>
    <a runat="server" href="~/studentbranch/checking_savings/"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_stash_my_cash2.jpg);" ></div></a>
    <a runat="server" href="~/studentbranch/loans/"><div class="mynav" style="width:133px; height:33px; background-image:url(../_images/_nav/nav_extra_credit2.jpg)"></div></a>
    <a runat="server" href="http://www.chachingteenclub.com/default.aspx?cu_id=92" target="_blank"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_cha_ching2.jpg)"></div></a>
    <a runat="server" href="~/apps_tools/" target="_blank"><div class="mynav" style="width:135px; height:33px; background-image:url(../_images/_nav/nav_tools2.jpg)"></div></a>
    <div class="mynav" style="width:7px; height:33px; background-image:url(../_images/_nav/nav_student_right2.jpg);"></div>
    </div>
    <div style="width:40px; height: 33px; float:left;">
        <img runat="server" border="0" src="~/_images/_nav/nav_right.jpg" />
    </div>
    </div>

和 CSS

.mynav{
float:left;
background-repeat:no-repeat;
padding:0;
display:block;
border:0 none;
outline:0 none;
 }

注意：我也试过使用display:inline没有结果。

4

1 回答 1

0

编辑：我删除了我之前的答案，这更有可能是问题所在（我没有 IE，所以我不知道它应该是什么样子。放置理想情况的图像是个好主意） .

包含<div>的宽度为 835。其子项的宽度为：136、155、134、133、134、135、7。总共是 834（比 835 少一个像素）。右边的垂直线是穿过的背景颜色。

编辑（再次）：我记得 IE 的浮动行为与其他浏览器不同（或至少看起来如此）。您可以尝试的只是提供包含<div>适当的菜单background-color而不是使用<div>宽度。

于 2013-07-29T14:53:18.477 回答