-->

2010-05-15

formタグのmarginの単位をemにするとhtmlタグのfont-sizeを継承する例

IE6 or IE7 or IE8の互換モードで確認します。
formタグの中でmarginとfloatを同時に使う場合は、font-sizeがhtmlタグと同じ必要があるかもしれません。
例えば、formタグがfont-size:smallで、htmlタグがfont-size:mediumの場合、1emにつき3px多くmarginが発生するかもしれません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<?xml version="1.0" encoding="UTF-8"?>-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <style type="text/css">
   <!--
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100px;
}

body {
  font-size: 15px;
  padding: 1em;
}

p {
  font-size: medium;
  clear: both;
}

div, div button, form, form button {
  font-size: small;
}

div button, form button {
  border: 1px solid gray;
  float: left;
  margin-left: 1em;
  padding-left: 7em;
  width: 8em;
  height: 2em;
}

div button {
  background-color: #faa;
}

form button {
  background-color: #afa;
}
     -->
  </style>
 </head>
 <body>
  <p>div</p>
  <div>
   <button>1</button><button>2</button><button>3</button>
  </div>
  <p>form</p>
  <form>
   <button>1</button><button>2</button><button>3</button>
  </form>
 </body>
</html>

0 件のコメント: