I am trying so solve a problem that causes me and my colleagues a splitting headache. Even though we've been provided a painkiller each we continue to be baffled by the way Google Chrome renders a checkbox in a container that has a font-size
of 10pt
.
The problem
Google Chrome seems to render some extra space around a checkbox element that I cannot seem to get rid of. The checkbox and its parent element must be 15
pixels tall. Setting the font-size of the parent element to 10pt causes that parent element to be 16
pixels in height.
An example
Take a look at the snippet below.
I have yet to find out (or understand) what causes the checkbox element to render as 15 pixels tall but effectively making its parent element 16 pixels tall.
td,
th
{
padding: 0;
font-size: 10pt;
}
input[type=checkbox]
{
height: 15px;
border: none;
padding: 0;
margin: 0;
}
<table width="100%" class="data">
<tr>
<th>Label 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Checkbox 2</th>
<td><input type="checkbox" disabled="disabled" /></td>
</tr>
<tr>
<th>Label 3</th>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
</table>
Exchanging the table for a div
, a p
or any other container also results in an incorrect height for that container.
Possible solution?
Setting the checkbox height to 14px
makes the parent row 15
pixels tall. But then the checkbox itself does not meet the designer's requirements and thus this solution will not be accepted. Any workarounds?
Aucun commentaire:
Enregistrer un commentaire