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 的 fiddle 。

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

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

谢谢

Answer 1

这是因为 button-element(连同 input、select 和 textarea)没有继承某些属性，font-size 就是其中之一。

这个 css 会解决这个问题:

button{font-size:inherit;}