使用相对的，而不是在CSS固定大小(Using relative instead of fixed

我想使用的，而不是固定大小的相对大小。 我想使用他们。

我的CSS是：

body{
     font:10px;
}

#wrap {
   font:1.2em;
}

#wrap ul li {
   padding-left:2em;
}

什么是价值li的在像素填充？ 我早就猜到它是2.0 * 10 = 20像素，但它看起来像它采取1EM = 12px的，我的意思是把它的父的大小。

我想它采取1X在PX父字体大小（即意味着字号body不wrap ）。

我很欣赏你的建议。

Answer 1:

EMS总是相对于它们的父元素，如你所说。 如果你说的IE浏览器-此外，元素的非字体尺寸总是计算相对于它的字体尺寸font-size:1.2em;padding:2em -该元素的填充将是2倍的字体大小是1.2倍其下的大小定义父元素。

该解决方案是使用更多的数学。 如果您的包装元素是1.2em，并且希望内部元件填充双待基线大小，你应该使用t=i*x ，其中t为目标大小， i是继承大小， x是所需的大小。 所以对于我们来说，是2em的目标大小; 1.2em是继承的大小：

2em = 1.2em * x => x = 1.67

所以填充应该是1.67em。

Answer 2:

的字体大小#wrap ul li是10px的* 1.2em * 2em的，从而填充左：24px的;

它始终以父元素的字体大小（你的情况#wrap ）

文章来源: Using relative instead of fixed size in CSS