IE 文本输入字段“可点击”区域只有 1 个像素宽答案

【问题标题】：IE-text input fields "clickable" region is only 1 pixel wideIE 文本输入字段“可点击”区域只有 1 个像素宽
【发布时间】：2011-03-21 22:49:11
【问题描述】：

我有一个简单的输入表单，其中包含 3 个字符宽的输入字段。然而，为了获得对这些字段的关注，我必须单击该字段的非常非常左侧，大约 1 像素或光标宽度。该表单在 Firefox 和 Safari 中运行良好，您可以在其中单击文本输入字段中的任意位置以获得焦点。

形式：

<form name=game_edit method=post action="?includepage=game_results.php&gameID=<?=$gameID?>" onsubmit="return validate_form();">
<table border="0" id=gameResults>
<tr><th colspan="4">RESULTS FOR: <?=$gamedate?> HOSTED BY <?=$hostName?></th></tr>
<tr>
    <td colspan="2">PLAYERS: <input type=text name=playercount value="<?=$playercount?>" size="3"></td>
    <td colspan="2">Championship money colleted: $<?=$champamount?></td>
</tr>
<tr><th>PLAYER</th><th>Place</th><th>Champ Discount</th><th>Didn't play</th></tr>
<? Player_list($gameID); ?> 
<tr><td colspan="2"><input type="text" name="manualAdd" size="17" /></td><td colspan="2">Add a username who didn't RSVP</td></tr>
<input type=hidden name=gameID value="<?=$gameID?>">
<tr>
    <td colspan="2"><input type=submit name='saveGameResults' value='SAVE CHANGES' style='width:100px;font-size:11px;'></td>
    <td colspan="2" align="right"><input type=submit name='saveGameResults' value='LOCK GAME' style='width:100px;font-size:11px;'></td>
</tr>
</table>

写入字段的函数：

function player_list($gameID)
//////////////////////////////////////////////
//  Creates player list for specified       //
//  game. Provides input for game results.  //
//////////////////////////////////////////////
{
    //*****Get list of players for gameID*****
    $sql = "SELECT rsvpid,rsvp.playerid,concat(fname,' ',lname) as playerName,place,points,freeChamp FROM rsvp LEFT JOIN players ON rsvp.playerid=players.id WHERE rsvp.gameID=$gameID ORDER BY place,lname";
    $playerlist = mysql_query($sql);

    if ($listrow = mysql_fetch_array($playerlist))
    {
        #--Get number of players who signed up on the website. This may differ from the actual player count --#
        #--entered by the host. A player may have played but not be signed up on the website.               --#
        echo "<input type=hidden name='recordedPlayerCount' value='".mysql_num_rows($playerlist)."'>";
        $i = 0;     // index for form rows      
        do
        {
            foreach($listrow as $key=>$value) $$key = $value;
            ($freeChamp) ? $freeChampChecked = "checked" : $freeChampChecked = "";  //check the freechamp box if appropriate.
            if ($place==100) $place="";
?>
            <tr> 
                <td><?=$playerName?>:</td>
                <td style="text-align:center"><input type=text size="2" name="place<?=$i?>" value="<?=$place?>"></td>
                <td style="text-align:center"><input type=checkbox name="freeChamp<?=$i?>" value='true' <?=$freeChampChecked?>></td>
                <td style="text-align:center"><input type=checkbox name="noShow<?=$i?>" value='true'></td>
                <input type=hidden name="rsvpid<?=$i?>" value="<?=$rsvpid?>">
            </tr>
<?
            $i++;   //increment index for next row
        }while ($listrow = mysql_fetch_array($playerlist));
    }else
        echo "<tr><td colspan='4'>NO RECORDS FOUND FOR THIS GAME!</td></tr>";
}
?>

有问题的表单域是“place”域...它只能在表单域的最左侧而不是整个表单域中单击，仅在 IE 中。（IE 7，据我所知）。

帮助？

【问题讨论】：

标签： php internet-explorer forms

【解决方案1】：

我敢打赌，罪魁祸首是将输入元素的大小设置为 2。试一试，如果效果更好，请告诉我：

<td style="text-align:center"><input type=text size="3" maxlength="2" name="place<?=$i?>" value="<?=$place?>"></td>

我在您的代码中注意到了其他一些事情：

<tr><th>PLAYER</th><th>Place</th><th>Champ
Discount</th><th>Didn't play</th></tr>
<? Player_list($gameID); ?>

您调用函数“Player_list()”，但您的函数名为“player_list()”。

foreach($listrow as $key=>$value) $$key = $value;

等同于：

extract($listrow);

【讨论】：

对 maxlength 不满意。我什至完全去掉了大小限制器，所以宽度是默认的 10 个左右字符宽。仍然必须单击左侧的一个像素。很好地抓住了函数名……有趣的是，该函数仍然被调用。我认为 php 对于这样的事情是区分大小写的。感谢您提供有关 extract() 的提示...这比 foreach() 更简洁。
嗯。那这肯定很奇怪。是否使用了任何可能影响元素行为的外部 CSS 或 Javascript？通常当我遇到这样的障碍时，我会考虑是否在我的加价中做出了最好的决定。尝试桌子以外的东西有意义吗？如果您简化表单（即删除除输入元素之外的所有其他标记），它是否可以正常工作？有时，当事情被简化时，问题会变得更加明显。
发布了解决方案...想知道 IE 是否只是一个迟到的问题。感谢您的帮助。

【解决方案2】：

感谢您的提示，迈克尔。发现问题。我在标题 div 中有一个 css 驱动的水平下拉菜单 (http://www.udm4.com/)，它在内容 div 上下拉。在此之上，我有一个 javascript 驱动的登录面板，它可以下拉到标题 div 上。在玩弄 z-index 以使一切正常运行时，我将保存表单的内容 div 设置为 -1 的 z-index。即使在取出除一个 div 和一个表单之外的所有内容之后，IE 也不喜欢负 z-index。我不知道负 z-index 是否构成有效的 CSS 和 IE 只是又一次，还是其他浏览器太宽松了。

【讨论】：