1

我有一个客户端表单，其中包含从 iframe 提供的 HTML - 我无法编辑它。我唯一能做的就是应用 CSS 编辑。

我正在尝试应用一个简单的调整，它将<td>s 堆叠在表单中

1. What is your age?

变成

1.
What is your age?

如果您右键单击第一个问题，Inspect Element您将看到我开始使用的相当有趣的 DOM 结构。这个例子看起来像这样：

<div id="Age" class="questionlabel">
    <table border="0" cellpadding="0" cellspacing="0">   
        <tbody>
            <tr>
                <td>
                    <span class="questionnumber_questionlabel">1. </span>
                </td>
                <td>
                    <label class="required">What is your age?</label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

当我检查<td>并添加它时display:table-row;，它完全忽略了我。这是在 Chrome 中 - 我可以复制这个 DOM 并让 CSS 在 jsfiddle 中做我想做的事情，所以我想在我看不到的地方有一个重置。我什至试过display:table-row !important;都无济于事。我可以申请border:2px solid blue;没有问题。我可以申请display:none;没有问题。

关于这里发生了什么会阻止这个简单的 CSS 参数工作的任何想法？

重申我唯一能做的就是应用 CSS - 没有 JavaScript 也没有 HTML 编辑。基本上，我将 url 中的 CSS 文件传递​​给 iFrame。这就是我所得到的。谢谢！

编辑：我很抱歉我不得不删除实时网站上示例表单的链接。

4

1 回答 1

3

编辑 - 必须删除屏幕截图，但解决方案仍然有效。

使用 Firebug将此代码添加到form-css.css。开始或结束，没关系：

table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}

（注意：我重置了那个边距，因为旧的边距（-10px）造成了难看的重叠。）

于 2011-08-02T03:31:36.523 回答