＆＃34;失控＆＃34; Webkit中的按钮

Question

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

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">
            <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>

Answer 1

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

JSFiddle

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;