Question

我对支持两种语言的网站使用相同的HTML / CSS属性。搜索栏在英语中运行良好，但当我换成另一种语言时，我无法输入任何内容。

您可以通过单击顶部菜单上的绿色标记来更改语言。

搜索栏的HTML：

<!-- Header Search Begin -->
<form class="h-search" method="post" action="search.php" name="productsearchform" onsubmit="javascript:return TXS_funcSubmitForm();" style="border-style: none; width: auto;">
  <fieldset>
    <input type="hidden" name="simple_search" value="Y" />
    <input type="hidden" name="mode" value="search" />
    <input type="hidden" name="posted_data[by_title]" value="Y" />
    <input type="hidden" name="posted_data[by_descr]" value="Y" />
    <input type="hidden" name="posted_data[by_sku]" value="Y" />
    <input type="hidden" name="posted_data[search_in_subcategories]" value="Y" />
    <input type="hidden" name="posted_data[including]" value="all" />              

    <div class="srch-area">
        <input type="text" class="srch-fld" name="{if $TXS_search_id && $active_modules.Predictive_Search ne ""}{$TXS_search_id}{else}posted_data[substring]{/if}" id="TXS_PS_search" id="TXS_PS_search" value="{$search_prefilled.substring|escape}" />
        <input class="sbmit-btn" name="" value="Go" type="submit" />
        <div class="clear"></div>
    </div>
    <input type="hidden" name="txs_area" value="C" /> 
  </fieldset>
</form>
<!-- Header Search End -->

Answer 1

当我从position: relative中删除.banner时，它可以正常运行：

.banner{
    margin: 0;
    padding: 10px 0;
    display: block;
}

原因是使用.banner的相对定位使其超过 .main-menu。因此，单击搜索字段不会执行任何操作，因为从技术上讲，您根本不是在搜索字段上单击。

解决此问题的其他方法是z-index的使用，但我认为如果您没有真正更改.banner的相对位置，则无需使用position: relative

Answer 2

您无法在文本框中输入文字的原因是它被另一个DIV覆盖。覆盖文本框的DIV部分对用户来说是“不可见的”（没有背景颜色或边框来表示它在那里）。

要强制您的文本框显示在DIV前面，请将文本框的z-index更改为更大的数字，例如9999。由于z-index仅适用于定位元素，因此您必须将文本框的position更改为relative，fixed或absolute。

在您的特定示例中，我建议您设置包含文本框的position的{{1}}和z-index，而不是文本框本身。在你的情况下，我会改变这一行：

div

到

<div class="main-menu">

修改班级<div class="main-menu" style="position:relative;z-index:9999;">最好是在整个网站上实现一致性，无论哪种方式都可以解决您的问题。

搜索栏输入不适用于其他支持的语言

2 个答案: