为什么div没有扩展到父div的整个宽度

Question

小提琴：https://jsfiddle.net/eze5x9t9/

HTML：

<div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;">
    <div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">

        <span style="font-size: 35px;display: table-cell;vertical-align: middle;">My Name</span>
    </div>
    <div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
        <span style="font-size: 20px;display: table-cell;vertical-align: middle;">My Job</span>
    </div>
</div>

截图：

为什么最后会有绿地？小提琴是在Chrome中完成的。

Answer 1

WebKit浏览器常见的 BUG ，实际上没有修复。

参考：

https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html

https://css-tricks.com/percentage-bugs-in-webkit/

http://www.screenr.com/pvB8

Answer 2

在Chrome中，外部div正好比包含的div宽一个像素。

然而，您可以通过不使用display: table;和display: table-cell;（如果您只是这样做以使垂直居中工作）来解决这个问题：

<div style="width: 100%; height: 65px; background: #00CC00;">
  <div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">
    <span style="font-size: 35px; line-height: 65px;">My Name</span>
  </div>
  <div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">
    <span style="font-size: 20px; line-height: 65px;">My Job</span>
  </div>
</div>

编辑：第二个代码片段展示了使用绝对定位和transform: translate进行垂直居中的标准方法：

.outer {
  height: 65px;
  background-color: #00cc00;
  display: flex;
}
.inner {
  width: 60%;
  float: left;
  background: #3074A3;
  color: #EDEDED;
  height: 65px;
  text-align: center;
  font-size: 35px;
  position: relative;
}
.inner + .inner {
  width: 40%;
  background: #266996;
  font-size: 20px;
}
.inner > span {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="outer">
  <div class="inner">
    <span>My Name</span>
  </div>
  <div class="inner">
    <span>My Job<br />Good job!</span>
  </div>
</div>