Html 如何修复不同浏览器更改我的div宽度？

这通常是一个我不需要回答的问题，然而，我感到困惑。我已经尝试了我能想到的一切。 这张照片右边有一块灰色的。这是滚动条，我想我会包括它。这是谷歌Chrome和我想要的

微软Edge就是这样做的。

我把问题缩小到我的列表项上。在Google Chrome上（根据我的分辨率，

的宽度是226.141px，在Microsoft Edge上，使用相同的CSS，

的宽度是226.35px

这是我的风格。css：

div.menuContainer {
width:100%;
height:48px;
}

ul.menuItems {
/*margin:-12px;*/
}

li.menuItem {
display:inline-block;
box-sizing:border-box;
width:calc(100% / 7);
float:left;
text-align:center;
height:48px;
font-weight:bold;
background-color:#DD4400;
color:#454545;
padding:12px 0;
overflow:hidden !important;
}

li.menuItem:hover {
background-color:#454545;
color:#DD4400;
}

li.menuItem a {
color:#454545;
}

li.menuItem a:hover {
color:#DD4400;
}

这是我的菜单：

<div class="menuContainer">

<ul class="menuItems">
    <a href="/videos.php">
    <li class="menuItem">
    Videos
    </li>
    </a>

    <a href="/playlists.php">
    <li class="menuItem">
    Playlists
    </li>
    </a>

    <a href="/categories.php">
    <li class="menuItem">
    Categories
    </li>
    </a>

    <a href="/actors.php">
    <li class="menuItem">
    Actors
    </li>
    </a>

    <a href="/photos.php">
    <li class="menuItem">
    Photos
    </li>
    </a>

    <?php if($logged_in == 0) { ?>
    <a href="/login.php">
    <li class="menuItem">
    Login
    </li>
    </a>

    <a href="/register.php">
    <li class="menuItem">
    Register
    </li>
    </a>
    <?php } 

    else { ?>

    <a href="/logout.php">
    <li class="menuItem">
    Logout
    </li>
    </a>

    <a href="/account.php">
    <li class="menuItem">
    My Account
    </li>
    </a>

    <?php }

    ?>
</ul>

</div>

---

如果您能提供任何帮助，我们将不胜感激。谢谢。

首先在css中重置：

* {
   /* So 100% means 100% */ 
   box-sizing: border-box; 
}

---

有关详细信息，请参阅。

这里有一种使用flexbox处理相同问题的不同方法。我还对你的HTML做了一些轻微的修改。这种方法的关键是在容器上使用

display:flex

，在该容器的子容器上使用

flex-grow:1

。注意：我还使用

display:flex

实现对

您使用哪种css重置？*{padding:0；margin:0；}是的，我有。和填充：0；边距：0我总是被告知永远不要像我那样把链接放在div之外。但是我看到了你是如何通过设置链接样式的100%高度使整个框可点击的。我将添加另一个工具。谢谢你的帮助，没问题。您还可能发现完全抛弃

ul

和

li

标记更容易（除非出于某种原因需要语义html）。使用一个包含

a

子对象的

div

容器可以获得相同的结果。我使用的方法是float：将所有子对象都保留在div中，直到有人建议我将它们放入列表中。但那是几年前，我开始使用列表。在这里，我更新了答案以简化HTML。