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;
}

来自style.css的第34行。我看到你对表格单元格的嵌套父类有类似的规范。这些可能会产生累积效应。

我建议您指定点或像素的字体大小吗？

Answer 2

styles.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/

您的代码0.75em元素的字体大小为td，您的#cart-block-contents-ajax字体大小为0.9em的DOM更高。等等......

你当前的结构是

#page   0.83em  
    .sidebar   0.95em  
        #ajaxCartUpdate   0.95em  
            #cart-block-contents-ajax   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-contents-ajax）

那是0.95的.95 .95的.75的0.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;

什么CSS元素使这个文本变得如此之小？

5 个答案: