css - 添加 <!DOCTYPE html> 会破坏对齐

<分区>

我忘了添加 <!DOCTYPE html>到一些元素，所以我回去添加它。这破坏了一些元素的对齐方式/高度，但我能够通过添加 px 来修复它。或 %它丢失的地方。

但是，在我的一个元素中，这并没有解决问题。这是 fiddle .它是应该填满整个容器的按钮高度。没有 <!DOCTYPE html> 效果很好.我看过其他类似的问题，但给出的建议(添加缺少的 px 或 % )没有奏效。

这是按钮的 CSS:

button {
    padding: 0px !important;
    margin: 0px !important;
    height: 15% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}

最佳答案

https://jsfiddle.net/tn3z9e6k/4/

.buttonrow { // created from #buttonrow
    width: 100%;
    padding: 0px;
    margin: 0px;
    height:calc(400px / 5); // total height / rows
}


button {
    padding: 0px !important;
    margin: 0px !important;
    height: 100% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}

关于css - 添加 <!DOCTYPE html> 会破坏对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39830080/