Как сделать дочерние элементы div затронутыми правилами div css?

Question

У меня есть html, у которого есть главный div.

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

У меня есть правило CSS применяется на DIV:

#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 для кнопки, однако его размер шрифта по-прежнему не является производным от родительского дел.

Благодаря

Answer 1

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 для размера шрифта ..

Answer 2

это связано с тем, что элемент кнопки (наряду с вводом, select и textarea) не наследует некоторые атрибуты, а размер шрифта - один из них.

это CSS будет разобраться:

button{font-size:inherit;}