有没有办法取消或克服垂直对齐的属性?
我有一个网站,其中包含包含以下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 开发人员工具中取消选中"垂直对齐:基线",它会完全按照我想要的方式显示)。
如何在我的页面上重现它?
谢谢!
这是一个有趣的问题,因为它非常涉及浏览器的默认样式表。
如果您查看规范 (http://www.w3.org/TR/CSS21/sample.html) 中给出的默认样式表,您会看到以下内容:
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
因此,默认行为是表格单元格的内容在表格单元格中垂直居中。
在样式表中,将垂直对齐属性设置为baseline
tbody
、tfoot
、thead
、tr
、th
和td
元素,这会影响表布局。
您需要调整重置垂直对齐属性的 CSS 规则,或根据需要为表样式添加其他规则。
在您的示例中,您可以简单地将上面给出的两个规则添加到您的之后原始规则。
或者,从原始规则集中省略垂直对齐属性。
更具体地说,请按如下方式更改 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 */
通过添加两个附加规则。
我还在样式表中使用具有相同"重置"的 WordPress 模板。我不想简单地重置我的孩子样式表中的重置 - 基于复杂的CSS可能导致的无数错误。相反,在我的"子"样式表中,我添加了一个类,并定义了在该类的项中的任何表元素都将垂直对齐到中间:
.masthead-table table, caption, tbody, tfoot, thead, tr, th, td {
vertical-align: middle;
}
然后在它实际出现的页面中,我为包含表的div 提供了正确的类:
<div class="masthead-table">
<table>
<tr>
<td>
voila, my middle-v-aligned content
</td>
</tr>
</table>
</div>
您无法取消属性。根据 CSS 原则,每个元素都具有 CSS 中定义的所有属性(尽管并非所有属性都影响元素的呈现)。
在样式表中,您也无法告诉浏览器忽略出现在另一个样式表中的 CSS 规则。您只能加入自己的设置,然后它们将参与级联,从而可以覆盖其他设置。
无法知道浏览器默认样式表、用户样式表和其他页面样式表中可能存在哪些 CSS 设置。确保事情就像不存在 CSS 规则一样工作的唯一方法是实际删除规则。这就是"CSS 重置"规则集风险如此之大的原因之一。
如果您被迫在存在某些"CSS重置"且无法删除或更改的环境中工作,则可能需要详细研究它们可能会覆盖哪些默认设置。不能保证这是成功的,因为浏览器可以自由地在默认样式表中拥有他们喜欢的任何内容。但是可能重要的设置是HTML5中描述的设置,或多或少推荐的渲染部分。它描述了以下内容:
sub { vertical-align: sub; }
sup { vertical-align: super; }
thead, tbody, tfoot, table > tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }
。以及一些根据 CSS 定义 valign
属性的设置,以及新meter
和progress
元素的一些特殊规则。
因此,vertical-align: baseline
可能会导致多个默认呈现功能被覆盖。您需要分析其中哪些适用,并确保vertical-align
设置为适合重要元素的值。
由于垂直对齐属性无法取消,因此您的网站在没有垂直对齐的情况下会适当呈现吗?比如通过修改边距、填充和边框? 边距: 1px 1px 1px 1px;(或类似的东西)....
一个非常描述性的网站,提供有关这些的信息: http://www.w3.org/TR/CSS21/box.html
此站点提供有关基线和垂直对齐的信息: http://dev.w3.org/csswg/css-text-3/
请检查CSS垂直对齐属性默认值因为默认值无论如何都是基线。但是,您可以将其从 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, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {