Question

我有一个链接和一个iframe并排。我希望链接显示在iframe上。这发生在td元素内部。这种模式迭代了几行。当我使用相对css定位时，我能够在iframe上显示链接，但链接所在的空间仍然会出现。并且它不必要地增加了列高度。我想消除这个空间。我怎么能这样做？

我看了this，但似乎这个解决方案仍然可以提升tr / td高度。我还有sample我的问题

Answer 1

折叠lineheight应该这样做。一定要进行测量，而不仅仅是“0”因此它将在ie6中起作用。我将.collapse类添加到包含锚点的div中。 http://jsfiddle.net/grs53/20/

HTML

<table>
    <tbody>
        <tr>
            <td class="donotwant">
                <div class="collapse">
                    <a class="top" href="bing.com">link</a>
                </div>
                <div>
                    <iframe class="bottom" src="http://www.google.com" ></iframe>
                </div>
            </td>
        </tr>
        <tr>
            <td class="donotwant">
                <div class="collapse">
                    <a class="top" href="bing.com">link</a>
                </div>
                <div>
                    <iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.donotwant {
    border:2px dotted green;
}
.top {
    top:80px;
    left:120px;
    position:relative;
    z-index:2;
    background:red;
}
.bottom {
    position:relative;
    z-index:1
}
.collapse {
    line-height:0px;
}

Answer 2

将您的HTML更改为此

<table>
    <tbody>
        <tr>
            <td class="donotwant">
                <div class="top">
                    <a href="bing.com">link</a>
                </div>
                <iframe src="http://www.google.com" ></iframe>
            </td>
        </tr>
        <tr>
            <td class="donotwant">
                <div class="top">
                    <a href="bing.com">link</a>
                </div>
                <iframe class="bottom" src="http://www.wikipedia.com" ></iframe>
            </td>
        </tr>
    </tbody>
</table>

你的CSS就是这个：

.donotwant {
    border:2px dotted green;
    position:relative;
    height:180px;
    width:300px;
}
.top {
    top:80px;
    left:120px;
    position:absolute;
    z-index:2;
}
.bottom {
    position:relative;
    z-index:1
}

相对位置对象保持其初始位置但显示在其他位置。绝对定位元素实际上移动到新位置。您可以将绝对定位元素移动到相对位置的顶部。

在上面的示例中，我创建了一个相对定位的div，其中任何绝对位置元素都可以从相对定位元素的左上角移动。如果相对定位元素移动到页面上的任何其他位置，则绝对元素将跟随。

Answer 3

那些不受欢迎的空间来自你缠绕链接的DIV元素。删除它。

http://jsfiddle.net/saad/grs53/12/

Answer 4

只需折叠包含链接的<div />（例如，将高度设置为0）。跨浏览器可能需要其他样式，但此处已在Chrome中测试an example

删除css位置的空间：relative

4 个答案:

HTML

CSS