css - 如何使子 div 元素受 div css 规则影响？

Question

我有一个具有主 div 的 html。

<div id="main_container">

在其中，我有一个表格，其中每一行都有一个按钮：

  <tr>
    <td>open2</td>
    <td>CPI</td>
    ...
    <td class="left_border">
        <button>x</button>
    </td>
    <td class="left_border">
        <button>p</button>
    </td>
    <td class="left_border">
        <button>k</button>
    </td>
</tr>

我在 div 上应用了一个 css 规则：

#main_container {
    font-size: 9px;
    font-family: tahoma;
    border: solid 3px rgba(78, 70, 70, 0.81);    
    display: inline-block;
}

此规则似乎不适用于按钮的字体大小。我在这里想念什么？

这是一个完整的 html + css 的小提琴。

http://jsfiddle.net/9YZuw/11/

注意：我已经更新了小提琴，所以现在按钮没有特定的 css 规则，但是它的字体大小仍然不是从它的父 div 派生的。

谢谢

Answer 1

这是因为按钮元素（连同输入、选择和文本区域）没有继承某些属性，字体大小就是其中之一。

这个css会整理出来：

button{font-size:inherit;}

Answer 2

CSS

#main_container {
    font-size: 9px;
    font-family: tahoma;
    border: solid 3px rgba(78, 70, 70, 0.81);    
    display: inline-block;
}

在此处删除此 css 或删除字体属性

button {
    padding: 0px;
    width: 20px;
    font-size: 8px;
    font-weight: bold;
}

并尝试使用 em 作为字体大小..