是什么CSS元素使这个文本如此之小

Question

如果你去这里 - http://www.joecrabtree.com/store - 并将产品添加到购物车，购物车中的所有文本都比其他所有文本都小。

我在Chrome的元素检查器中玩过，但我找不到任何可以更改的内容，这些更改可以使购物车文本变大而不影响页面上的其余文本。

也就是说，我不明白是什么让它比其他一切都小。

Answer 1

看起来封闭的 <td> 标记包含以下样式：

media="all"
body, caption, th, td, input, textarea, select, option, legend, fieldset {
    font: 0.75em/1.6em Helvetica, Arial, sans-serif;
}

从样式的第 34 行.css。我看到您对表格单元格的嵌套父级有类似的规范。这些可以产生累积效应。

我可以建议您以磅或像素为单位指定字体大小吗？

Answer 2

样式.css第 34 行：

body, caption, th, td, input, textarea, select, option, legend, fieldset {
    font: 0.75em/1.6em Helvetica,Arial,sans-serif;
}

Answer 3

em字体大小是相对于当前大小的。

当您嵌套font-size与 1 不同的元素时，嵌套的深度会逐渐变大或变小。

示例 http://jsfiddle.net/gaby/NcKNF/

您的代码具有td元素的字体大小0.75em甚至更高#cart-block-contents-ajax具有0.9em字体大小的DOM。

等等..

您当前的结构是

#page 0.83em     .侧边栏 0.95em         #ajaxCartUpdate 0.95em             #cart-块内容-阿贾克斯 0.9em                TD 0.75em

所以你在 DOM 中越深入，它就越小

Answer 4

问题似乎是级联小于 1em 的字体大小：

来自萤火虫：

#cart-block-contents-ajax   0.9em   style.css?H (line 870)
#page   font-size: 0.83em   style.css?H (line 30)
.sidebar    font-size: 0.95em   style.css?H (line 297)
body    font-size: 100% layout.css?H (line 149)
body    font-size: 0.75em   style.css?H (line 34)
td          font-size: 0.75em   style.css?H (line 34)

所以body设置为 100% ，然后重置为 0.75em ，然后是 .83em （#page），然后是 .95em （.sidebar），然后是 .75em （td），最后是 .9em （#cart-block-content-ajax）

所以这是 .9 的 .75 的 .95 的 .83 的 .75 的 100% = .399 em

Answer 5

你可以把它添加到你的css中，它会覆盖任何其他导致你的字体变小的css。这只会影响购物车中的内容。

/*cart item */
.block .content #cart-block-contents-ajax .cart-block-items tbody .odd {font-size:15px;}
/* remove product links */
.block .content #cart-block-contents-ajax .cart-block-items tbody .cart-block-item-desc {font-size:15px; font-weight:bold;}
/* Total Items */
.cart-block-summary-items,.cart-block-summary-total {font-size:15px; padding:5px}
/* View cart and Checkout links */
.cart-block-summary-links .links {font-size:15px; font-weight:bold;}

希望这有帮助。

并回答您的问题：添加到body的属性使您的字体变小：

font: 0.75em/1.6em Helvetica, Arial, sans-serif;