All geek questions in one place

Strict DocType imposes minimum table row height in FF / Chrome

Something that I did not notice before, but it seems that in Chrome / Firefox (and, possibly, in Opera / Safari, I did not check them specifically), using strict doctype prevents the table rows from being displayed smaller than the value that I 'm unable to determine the calculation.

The following document is displayed, as one could imagine in IE7 with all the rows of a table measuring 8 pixels tall to match the height of the content (which is probably incorrectly known by IE), while in Chome / Firefox the rows are 23px tall. No combination of smoothing borders, margins, margins, etc. that I found will allow the rows to be smaller than this.

    <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <style>
    span {
      font-family: Verdana;
      font-size: 8px;
      line-height: 8px;
    }
  </style>
</head>
<body>
  <table cellspacing="1" border="1">
    <tr>
      <td><span>One</span></td>
      <td><span>Two</span></td>
      <td><span>Three</span></td>
    </tr>
    <tr>
      <td><span>Four</span></td>
      <td><span>Five</span></td>
      <td><span>Six</span></td>
    </tr>
    <tr>
      <td><span>Seven</span></td>
      <td><span>Eight</span></td>
      <td><span>Nine</span></td>
    </tr>
  </table>  
</body>
</html>

doctype , 8 , .

- , ?

.

+3
2

<td>, <span>

td{line-height:8px;}
+3

:

.

, <span>, .

, IS . , .. <span>

body{font-size:8px} , . , .. table{font-size:8px}, , .

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <style>
    body{}
    td{}
    span {font-family: Verdana;}

    span.small{font-size:8px;}
  </style>
</head>
<body>
<h1>Default font size</h1>
  <table cellspacing="1" border="1" cellpadding="0">
    <tbody>
        <tr>
          <td><span>One</span></td>
          <td><span>Two</span></td>
          <td><span>Three</span></td>
        </tr>
        <tr>
          <td><span>Four</span></td>
          <td><span>Five</span></td>
          <td><span>Six</span></td>
        </tr>
        <tr>
          <td><span>Seven</span></td>
          <td><span>Eight</span></td>
          <td><span>Nine</span></td>
        </tr>
    </tbody>
  </table>  

  <h2>8px font size</h2>
   <table cellspacing="1" border="1" cellpadding="0">
    <tbody>
        <tr>
          <td><span class="small">One</span></td>
          <td><span class="small">Two</span></td>
          <td><span class="small">Three</span></td>
        </tr>
        <tr>
          <td><span class="small">Four</span></td>
          <td><span class="small">Five</span></td>
          <td><span class="small">Six</span></td>
        </tr>
        <tr>
          <td><span class="small">Seven</span></td>
          <td><span class="small">Eight</span></td>
          <td><span class="small">Nine</span></td>
        </tr>
    </tbody>
  </table>

</body>
</html>

,

+1

Source: https://habr.com/ru/post/1769511/

More articles:


All Articles