IE7父母与子女背景图像的显示问题

我在使用IE7显示表格时出现问题（不用担心它用于表格数据），其中表格行具有在x轴上重复的背景图像，表格部分（在这种情况下是TH）具有单独的背景图像，根本没有重复。IE7父母与子女背景图像的显示问题

下面是一个例子：

http://cdn.bkit.ca/misc/juniors-table-problem.png

这里的CSS：

<style> 

table, 
td, 
th, 
tr { 
    border: none; 
} 

table tr { 
    border-bottom: 1px solid #BEBEBE; 
} 

table td { 
    padding: 7px; 
    border-left: 1px solid #BEBEBE; 
    border-right: 1px solid #BEBEBE; 
} 

table th { 
    padding: 7px; 
    text-align: left; 
} 

table .header { 
    background-image: url(/images/layout/nav_background.png); 
    background-position: top; 
    background-repeat: repeat-x; 
    height: 37px; 
    border: none; 
    margin: 2px; 
} 

table .header th { 
    color: white; 
    font-weight: normal; 
    text-align: center; 
} 

table .header th.first { 
    background-color: transparent; 
    background-image: url(/images/layout/nav_left.png); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

table .header th.last { 
    background-image: url(/images/layout/nav_right.png); 
    background-repeat: no-repeat; 
    background-position: top right; 
    background-color: transparent; 
} 

</style>

而这里的HTML：

<table> 
    <tr class="header"> 
     <th class="first">a</th> 
     <th>b</th> 
     <th class="last">a</th> 
    </tr> 
</table>

请不要责备我的CSS，一些它是“喷洒和祈祷”CSS希望修复它。

所以我不能为我的生活找出为什么我有这个问题。 IE8没有这个问题。

任何想法？

来源

2009-11-19 bkorte

如果您发布的图像是表格的前两个单元格的屏幕截图，则问题可能是第一个单元格第二个行正在调整列的大小。所以你的单元格，我们称之为0x0，正在调整大小的是列中所有单元格的内容。

如果要使用重复背景，我们总是需要思考智能，如果我是你，我会创建2个单独的背景图片（请检查图片底部的这篇文章，我不能把它放在这里它打破了我的代码...）。

然后，使用这些样式：

table .header { 
     background:none 
     height: 37px; 
     border: none; 
} 
table .header th.first { 
     background: url(/images/layout/[my-image-2].png) left no-repeat; 
} 

table .header th.last { 
     background: url(/images/layout/[my-image-2].png) right no-repeat; 
} 

table .header th.middle { 
     background: url(/images/layout/[my-image-1].png) repeat-x; 
} 

<table> 
    <tr class="header"> 
      <th class="first">a</th> 
      <th class="middle">b</th> 
      <th class="last">a</th> 
    </tr> 
    <tr> 
     <td>this cell is resizing cell above</td> 
     <td>content</td> 
     <td>this cell is resizing cell above</td> 
    <tr> 
</table>

我们正在做的事情是：

去除背景从tr元素作为tr不接受背景。
将背景编号2设置到中间部分并在x方向上重复。
使用我们的背景编号1上的.first单元格，并将其对齐到左侧，并在.last上执行相同操作并对齐到右侧。

如果您的.first和.last比我的示例背景更长，那么您可以简单地扩展图像。

这应该解决您的问题。

来源

2009-11-20 00:21:22 rochal

第一/ lass类可能会覆盖tr背景。你能扩展你的左/右PNG的宽度，以便它们延伸覆盖整个单元格吗？

来源

2009-11-19 23:45:21

IE7父母与子女背景图像的显示问题

回答

相关问题