【问题标题】:Can't click in inputs in Firefox无法在 Firefox 中点击输入
【发布时间】:2014-11-30 01:49:22
【问题描述】:

我在这里有一个表单,由于某种原因在 Firefox 中我无法在输入中单击 - 在任何其他浏览器中都可以正常工作。有谁知道问题出在哪里?

谢谢

<form method="post" id="adduser" class="user-forms" action="http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">



                <p class="form-username">
                    <label for="user_name"><?php _e('Username (required)', 'frontendprofile'); ?></label>
                    <input class="text-input" name="user_name" type="text" id="user_name" value="<?php if ( $error ) echo esc_html( $_POST['user_name'], 1 ); ?>" />
                </p><!-- .form-username -->

 <p class="last_name">
                    <label for="first_name"><?php _e('First Name', 'frontendprofile'); ?></label>
                    <input class="text-input" name="first_name" type="text" id="first_name" value="<?php if ( $error ) echo esc_html( $_POST['first_name'], 1 ); ?>" />
                </p><!-- .last_name -->
                <p class="last_name">
                    <label for="last_name"><?php _e('Last Name', 'frontendprofile'); ?></label>
                    <input class="text-input" name="last_name" type="text" id="last_name" value="<?php if ( $error ) echo esc_html( $_POST['last_name'], 1 ); ?>" />
                </p><!-- .last_name -->



                <p class="form-email">
                    <label for="email"><?php _e('E-mail (required)', 'frontendprofile'); ?></label>
                    <input class="text-input" name="email" type="text" id="email" value="<?php if ( $error ) echo esc_html( $_POST['email'], 1 ); ?>" />
                </p><!-- .form-email -->



            </form>

【问题讨论】:

  • 据我所见,HTML 缺少所有 input 字段的右括号。也许先尝试纠正这个?或简写为&lt;input class="..." ... /&gt;
  • 你有一些额外的结束标签:div 和 p
  • 为什么要在这里复制浏览器中呈现的内容?复制您的实际代码。
  • 通过validator.w3.org运行你的代码,你会看到你的页面上有几个(我认为是30个)HTML错误。有可能其中一个正在破坏它。
  • 什么版本的火狐?我用你的代码 (jsfiddle.net/uzyJt) 创建了一个小提琴,它在 Firefox 21 中对我有用,尽管有额外的 &

标签: php html css forms input


【解决方案1】:

您的填充规则导致了问题(第 69 行):

.style-profile textarea, .style-profile input[type="text"] {
    padding: 17px !important;
}

因为输入有一个固定的高度,这个规则实际上是关闭了可点击区域,让 Firefox 感到困惑。

【讨论】:

  • 酷。我要补充一点,也许您可​​以使用 padding: 5px 之类的东西并删除输入的高度以获得相同的结果。
【解决方案2】:

line 7 上,您应该删除整行,上面写着:

<center><a href="http://style-card.co.uk/id" border="0"><img src="http://style-card.co.uk/id/wp-content/uploads/2013/03/sclogo.jpg" border="0"></center>

您应该将开始表单标记从 line 142 移动到 line 153 这应该可以解决您的问题

【讨论】:

  • 谢谢,但是移动表单开始标签没有任何区别,删除第 7 行会从网站上删除徽标。
  • 您可以将徽标代码从head 移动到header 标签中
猜你喜欢
  • 1970-01-01
  • 2014-06-02
  • 1970-01-01
  • 1970-01-01
  • 2018-05-05
  • 2021-06-09
  • 1970-01-01
  • 2019-12-20
  • 2021-04-02
相关资源
最近更新 更多