在 HTML 中使用 <a href> 和 <input> 时 iPad Safari 中的奇怪填充答案

【问题标题】：Strange padding in iPad Safari when using <a href> and <input> in HTML在 HTML 中使用 <a href> 和 <input> 时 iPad Safari 中的奇怪填充
【发布时间】：2011-11-07 07:09:07
【问题描述】：

我正在构建一个用于丹麦语听写练习的系统，特别是针对 iPad。到目前为止，我一直在 gnome 中进行测试，页面看起来还不错，但是当我终于拿到 iPad 时，出了点问题。

我正在用这样的声音构建可点击的句子：

<audio id="audiotag6" src=diktat02/gaaet.m4a preload="auto"></audio>
<a href="javascript:play_sound('audiotag6');">The sun had   <input type="text" name="word6" autocomplete="off"/>  ned, </a>
<audio id="audiotag7" src=diktat02/koelig.m4a preload="auto"></audio>
<a href="javascript:play_sound('audiotag7');"> and the air was  <input type="text" name="word7" autocomplete="off"/>  klar, </a>

在 chrome 和 IE 中，文本看起来很好：

太阳有[输入框]，空气有[输入框]

但在 iPad 上，它看起来像是在 "a href=":

的每一行之前插入了一个 [tab]

       The sun had [ input box ]            and the air was [ input box ]

这是我第一个有主页的大项目，这个问题对我来说是一个很大的挫折，因为整个想法是让它在 iPad 上工作 - 请帮助..

【问题讨论】：

莫名其妙地是“ned”和“klar”吗？还是您的示例中的错字？
在元素内输入元素aren't allowed。

标签： html ipad safari padding

【解决方案1】：

我发现删除音频标签可以解决问题。您可以使用以下布局：

<body>
<audio id="audiotag6" src=diktat02/gaaet.m4a preload="auto"></audio>
<audio id="audiotag7" src=diktat02/koelig.m4a preload="auto"></audio>

<form>
<a href="javascript:play_sound('audiotag6');">The sun had   <input type="text"       name="word6" autocomplete="off"/>  ned, </a>
<a href="javascript:play_sound('audiotag7');"> and the air was  <input type="text" name="word7" autocomplete="off"/>  klar, </a>
</form>
</body>

此外，您不应将锚元素放在表单元素内，而应放在字段类型元素外。它可能有效，但语义不准确:)

编辑：

在考虑了如何以更友好的语义方式完成之后，我将它们放在一起：

<audio>
  <source src="diktat02/gaaet.m4a" id="audiotag6" preload="auto" type="audio/m4a" />
  <source src="diktat02/koelig.m4a" id="audiotag7" preload="auto" type="audio/m4a" />
  Your browser does not support the audio tag.
</audio> 

<form onsubmit="play_sound('audiotag6');">
The sun had   <input type="text" name="word6"  autocomplete="off"/>  ned, 
<input type="submit" value="Play" />
</form>

<br />
<br />

<form onsubmit="play_sound('audiotag7');">
and the air was  <input type="text" name="word7" autocomplete="off"/>  klar,
<input type="submit" value="Play" />
</form>

这样可以避免链接，立即设置音频标签，句子的播放机制更清晰，并且 javascript 不那么间接。当然，您将根据自己的喜好决定如何实施，我认为无论如何我都不是最好的解决方案:)

希望这会有所帮助。

【讨论】：