Webkit 中的“逃跑”按钮答案

【问题标题】："Runaway" button in WebkitWebkit 中的“逃跑”按钮
【发布时间】：2014-12-26 14:27:36
【问题描述】：

我最近在 Webkit 中遇到了我们的一个网站的问题。有一些旧的遗留 Web 界面在表格内有一个表格，每次用户尝试单击按钮时，它都会试图在 Chrome 和 Webkit Opera 中逃跑，因为每次点击时表格都会不断扩大。

<h1>Webkit only</h1>
<table>
    <tr style="line-height: 3em;">
        <td><span>AAA</span></td>
        <td>
            Here goes some text<br/>
            Here goes some more text<br/>            
        </td>
        <td rowspan="2">
            <iframe width="100%" height="100%" border="1" scrolling="yes" src="http://www.google.ru"></iframe>
        </td>
    <tr style="line-height: 3em;">
        <td>&nbsp;</td>
        <td>
            Here goes some more text<br/>
            Here goes some more text<br/>
        </td>
    </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Try to click it &mdash;&gt;</td>
            <td><button onclick="alert('Yes')">Click me!</button></td>
        </tr>
</table>

【问题讨论】：

标签： google-chrome iframe html-table webkit opera

【解决方案1】：

所以解决方案很简单：为包含 iframe 的表格单元格添加固定宽度。但是这个错误看起来确实很有趣。

JSFiddle

<h1>Webkit only</h1>
<table>
    <tr style="line-height: 3em;">
        <td><span>AAA</span></td>
        <td>
            Here goes some text<br/>
            Here goes some more text<br/>            
        </td>
        <td rowspan="2" style="height: 200px">
            <iframe width="100%" height="100%" border="1" scrolling="yes" src="http://www.google.ru"></iframe>
        </td>
    <tr style="line-height: 3em;">
        <td>&nbsp;</td>
        <td>
            Here goes some more text<br/>
            Here goes some more text<br/>
        </td>
    </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Try to click it &mdash;&gt;</td>
            <td><button onclick="alert('Yes')">Click me!</button></td>
        </tr>
</table>

【讨论】：