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

Question

这通常是一个我不需要回答的问题，但是，我感到困惑。我已经尝试了我能想到的一切。这张照片包括右侧的灰色部分。那是滚动条，我想我会把它包括在内。这是 Google Chrome 以及我想要的方式。

Microsoft Edge 就是这样做的。

我将问题缩小到我的列表项 <li>。在 Google Chrome（根据我的分辨率），<li> 的宽度为 226.141px，在 Microsoft Edge 上，使用相同的 CSS，[=13] 的宽度=] 是 226.35px.

这是我的 style.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>

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

Answer 1

首先在您的 css 中进行重置：

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

详情见link。

Answer 2

这是使用 flexbox 解决同一问题的不同方法。我还对您的 HTML 做了一些细微的修改。这种方法的关键是在容器上使用 display: flex 并在该容器的子容器上使用 flex-grow: 1。注意：我还使用 display: flex 在 <a> 元素上实现垂直和水平居中，而不必使用顶部和底部填充。

.menu {
  height: 48px;
  display: flex;
}

.menu a {
  flex-grow: 1;
  display: flex;
  font-weight: bold;
  background-color: #DD4400;
  color: #454545;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
}

<div class="menu">
  <a href="/videos.php">Videos</a>
  <a href="/playlists.php">Playlists</a>
  <a href="/categories.php">Categories</a>
  <a href="/actors.php">Actors</a>
  <a href="/photos.php">Photos</a>
  <a href="/logout.php">Logout</a>
  <a href="/account.php">My Account</a>
</div>

这里有一篇快速文章，解释了 flexbox 可以为您做什么 - css-tricks.com/snippets/css/a-guide-to-flexbox. I'd highly recommend adding this to your toolkit - it's relatively modern, but has very good browser support caniuse.com/#feat=flexbox。我经常使用它。

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

How to fix different browsers changing my div width?

html

css

menu

cross-browser