取消vertical-align属性

Question

有没有办法取消或克服垂直对齐属性？

我有一个包含以下CSS样式表的网站:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, 
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}

我在页面上插入了一个表格,其内容以一种奇怪的方式显示,因为这个样式属性(意味着如果我在Chrome开发者工具中取消选中"vertical-align:baseline",它会显示我想要的方式).

如何在我的页面上重现它？

谢谢!

Answer 1

这是一个有趣的问题,因为它非常触及浏览器的默认样式表.

如果查看规范(http://www.w3.org/TR/CSS21/sample.html)中给出的默认样式表,您会看到以下内容:

thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

因此,默认行为是表格单元格的内容在表格单元格中垂直居中.

在您的样式表,你的vertical-align属性设置baseline为tbody,tfoot,thead,tr,th和td元素,这是影响你的表格布局.

您需要调整重置vertical-align属性的CSS规则,或根据需要为表样式添加其他规则.

在您的示例中,您只需在原始规则之后添加上面给出的两个规则.

或者,省略原始规则集中的vertical-align属性.

更具体地说,更改CSS样式表,如下所示:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, 
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, 
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, 
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}
thead, tbody, tfoot { vertical-align: middle } /* add this rule*/
td, th, tr { vertical-align: inherit } /* add this rule */

通过添加两个附加规则.