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;
}

此规则似乎不适用于按钮的font-size。我在这里缺少什么？

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

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

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

由于

Answer 1

这是因为button-element（连同input，select和textarea）不会继承某些属性，而font-size就是其中之一。

这个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作为字体大小..

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

2 个答案: