CSS位置，与Web-kit和FF略有偏差

发布于 2024-11-01 07:09:13 字数 1000 浏览 4 评论 0原文

我有一个表格，其中的图像以绝对方式定位，因此它们将位于每列的边框上。我的问题是在 FF 中，我将它们排列得恰到好处，而在 Web-kit 浏览器中，它们被推到右侧约 6-7 像素？任何想法为什么，通常我在这些浏览器之间没有问题。我正在使用 CSS Reset/

编辑：经过进一步审查，FF 似乎无法识别位置：相对于表格，但可以识别 DIV。 Webkit 浏览器确实可以识别 table 的position:relative 设置。因此，在 FF 中，位置基于 DIV，而在 Webkit 浏览器中，位置基于 TABLE。
有人以前遇到过这个吗??????

HTML:

<td class="tri-img">
<img class="one" src="img/triangles/triangle20.png" alt="" >
<span class="tri-val one">30&#37;</span>
</td>
<td class="tri-img">
<img class="two" src="img/triangles/triangle20.png" alt="" >
<span class="tri-val one">30&#37;</span>
</td>

CSS:

.tri-graph .tri-col td.tri-img{
    position: relative;
    color:#ffffff;
}
.wrap-graph.relative img{
    position: absolute;
    cursor: pointer;
    bottom:1px;
    z-index: 1;
}

.wrap-graph.relative img.one{
    left:53px;
}
.wrap-graph.relative img.two{
    left:91px;
}

原文

I have a table with images inside the a that are positioned with absolute, so they will be right on the border of each column. My issue is in FF i have them lined up just right and in the Web-kit browsers they are pushed to the right about 6-7 pixels? Any ideas why, usually I don't have issues between these browsers.
And I am using a CSS Reset/

EDIT: After further review it seems like FF does NOT recognize a position:relative to a table but will for a DIV. Webkit browsers do recognize position:relative set to a table. So in FF the position was based off the DIV and in Webkit browsers it was based off the TABLE.
Has anyone come across this before?????

HTML:

<td class="tri-img">
<img class="one" src="img/triangles/triangle20.png" alt="" >
<span class="tri-val one">30%</span>
</td>
<td class="tri-img">
<img class="two" src="img/triangles/triangle20.png" alt="" >
<span class="tri-val one">30%</span>
</td>

CSS:

.tri-graph .tri-col td.tri-img{
    position: relative;
    color:#ffffff;
}
.wrap-graph.relative img{
    position: absolute;
    cursor: pointer;
    bottom:1px;
    z-index: 1;
}

.wrap-graph.relative img.one{
    left:53px;
}
.wrap-graph.relative img.two{
    left:91px;
}

分享到QQ

分享到微博