Firefox CSS高度问题
[英]Firefox CSS height issue
问题描述
所以我有这张桌子http://mikepuerto.com/iNews/-
我正在使用一些jquery对它进行排序。 如果您在除firefox之外的任何浏览器中查看此内容，您将看到表标题的底部一直有阴影，当您单击标题时，箭头指向下方指示您正在对该列进行排序...由于某些原因，firefox不会显示阴影并正确显示箭头...我将其范围缩小到与“ th”的高度有关。 通过以下样式的高度和填充，它可以在大多数其他浏览器上正常工作...如果将高度设置为69px，则仅在FF中有效； 有什么想法为什么会发生这种情况？
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
padding: 0 7px 16px 7px;
height: 54px;
}
3 个解决方案
解决方案1
2 已采纳
看起来在FF中，它是覆盖它的第一个表行。
您可以通过使表格的第一行不具有背景色并在其顶部添加边距来解决。 现在看看。
高度实际上应该为70px，因为那是背景图片的高度。 填充对FF没有影响。 在FF中，标签看起来不错，然后在其他版本中，只需确保背景为白色即可。
将页面中的CSS更改为该padding-bottom的底部，由于所有其他样式，padding-top不适用于FF。
#slim {
width: 580px;
margin: 0 auto;
}
/* tables */
table.interactiveData {
font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
background-color: ;
margin:10px 0pt 15px;
font-size: 10px;
width: 100%;
text-align: left;
border: 1px solid #dbdbdd;
}
table.interactiveData thead tr {
cursor: pointer;
background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
}
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
table.interactiveData tbody td {
padding: 7px;
vertical-align: middle;
}
table.interactiveData td.even {
}
table.interactiveData tr.odd {
background-color: #f3f3f3;
}
table.interactiveData td.sortedeven {
background-color:#edf8fa;
}
table.interactiveData td.sortedodd {
background-color:#edf1f2;
}
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
特别是将#fff作为背景颜色来覆盖红色。
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
然后将其设置为70px的高度，并且只设置左右边距。 如果要填充顶部和底部，则必须将它们包裹在一个跨度中或走另一条路线。
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
现在可以在FF，Chrome，IE和Safari中使用。
完整标记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
表$（document）.ready（function（）{$（“＃interactiveData”）。tablesorter（{widgets：['zebra'，'columnHighlight']}）;}
);
</script>
<link rel="stylesheet" href="styles.css" />
<style>
#slim {
width: 580px;
margin: 0 auto;
}
/* tables */
table.interactiveData {
font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
background-color: ;
margin:10px 0pt 15px;
font-size: 10px;
width: 100%;
text-align: left;
border: 1px solid #dbdbdd;
}
table.interactiveData thead tr {
cursor: pointer;
background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
}
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
table.interactiveData tbody td {
padding: 7px;
vertical-align: middle;
}
table.interactiveData td.even {
}
table.interactiveData tr.odd {
background-color: #f3f3f3;
}
table.interactiveData td.sortedeven {
background-color:#edf8fa;
}
table.interactiveData td.sortedodd {
background-color:#edf1f2;
}
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<div id="slim">
<table id="interactiveData" class="interactiveData" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Rank</th>
<th>Broker-Dealer</th>
<th>Website</th>
<th>Discretionary Assets</th>
<th>Discretionary Assets 2007</th>
<th>Difference in Discretionary Assets 2007-2009</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>data2b
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>1</td>
<td>data4d</td>
<td>data5e</td>
<td>data5e</td>
</tr>
<tr>
<td>2</td>
<td>
data1f
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data2g</td>
<td>data3h</td>
<td>data4i</td>
<td>data4i</td>
</tr>
<tr>
<td>3</td>
<td>data2l
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3m</td>
<td>data4n</td>
<td>data5o</td>
<td>data5o</td>
</tr>
<tr>
<td>4</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
<tr>
<td>5</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
<tr>
<td>6</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
</tbody>
</table>
</div>
</body>
解决方案2
1 2009-12-16 04:14:16
尝试设置
background-position:bottom:
遵循您发布的table.interactiveData thead tr规则。
编辑：同样，在下一条规则上，您需要该规则（或删除那里的居中），因此，这就是您所需要的：
table.interactiveData thead tr {
cursor: pointer;
background: url(images/thead-bg.jpg);
background-position:bottom;
background-repeat:repeat-x;
}
table.interactiveData thead tr .headerSortDown,
table.interactiveData thead tr .headerSortUp {
background: url(images/thead-hover-bg.jpg) center bottom no-repeat;
/* changed to "center bottom", thanks Ryan */
}
解决方案3
0 2009-12-16 03:54:25
填充的处理方式有所不同。 在Fx中，标头单元格上的填充不影响单元格的大小，因此高度为指定的54px。
删除标题单元格上的高度设置，并在行上指定70px的高度。
CSS表，Firefox中的表格单元高度问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.