<col> width and padding - IE7_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-10 03:43 出处：网络

IE 7 adds the padding to the total width of the column. Firefox and Chrome include the padding in the width. How do I get consistency across browsers?

<!DOCTYPE html>
<html>
  <head>
    <title>Col Padding</title>
    <link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.cs开发者_运维技巧s' />
    <style type='text/css'>
      #col1
      {
        width: 200px;
      }
      #theTab td
      {
        background-color: green;
        padding: 10px;
      }
      #theBar
      {
        width: 200px;
        height: 20px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id='theBar'></div>
    <table id='theTab'>
      <col id='col1'/>
      <tr>
        <td>Data</td>
      </tr>
    </table>
  </body>
</html>

IE8 and later, and everything else you're likely to have to support, support overriding how box sizing works per-element using the box-sizing CSS property.

If you have to support IE7, set the box sizing on whatever you need to border-box; IE7 will ignore the property but follow that model anyway, and everything else will match IE7's behaviour.

That said, IE6 and later should support the W3C standard model when in "standards mode". You should doublecheck your DOCTYPE and such to make sure they'll invoke that rendering mode and not "quirks mode".

Either make a separate stylesheet for IE and load it with a conditional statement, or accept the IE is the lesser browser and doesn't display well-written code correctly.

option 1 seems the most satisfying though ;-)