阅读:1780回复:2
Firefox Aurora 11+ 的 CSS bug:某些 :after :before 不能识别
Firefox Aurora 11+ 的 CSS bug:某些 :after :before 不能识别
HTML <div title="在支持content属性的浏览器中能看到我被显示了"><img src="image.jpg" title="阿拉法基阿里解放路" /></div> <table summary="这是summary注释属性" title="这是title标题属性"> <tr><td>This table </td><td>uses css</td></tr> <tr><td>generated content</td><td>for the caption</td></tr> </table> CSS img:before{content:attr(title);} table[summary]:after { content: "表格 " counter(table) ": " attr(summary); counter-increment: table; display: table-caption; caption-side: bottom; font-size: 10px; font-style: italic; white-space: nowrap; margin-top: 5px; margin-bottom: 20px; } table[title]:before { display: table-caption; caption-side: top; content: attr(title); font-size: 12px; font-weight: bold; white-space: nowrap; } Firefox Aurora 11+ 只有 table[title]:before {...} 生效,在IE9下比firefox好一点,table[summary]:after { 也能显示。 两个浏览器下 img:before{content:attr(title);} 都无效。 描述:firefox css bug 图片:Firefox CSS bug.jpg ![]() |
|
1楼#
发布于:2012-01-13 01:21
应该是 display: table-caption 的问题,
在w3school文档中对于display: table-caption的解释是 "table-caption 此元素会作为一个表格标题显示(类似 <caption>)" http://www.w3school.com.cn/css/pr_class_display.asp 而只能对每个table定义一个caption. 只要去掉table:before或:after 中的任意一个display: table-caption就能全部显示了. 如果这种解释是正确的话,这倒是IE9的BUG了 |
|
2楼#
发布于:2012-01-13 01:21
原来如此!去掉了一个 display: table-caption 可以工作了。
但图片那个又是怎么回事呢? img:before{content:attr(title);} firefox 和 ie 都不工作,而且我特意装了 google chrome 16 ,同样无效。 |
|