Html <select> 进入页面顶部[关闭]答案

【问题标题】：Html <select> go on top of page [closed]Html <select> 进入页面顶部[关闭]
【发布时间】：2014-09-05 21:45:51
【问题描述】：

我的标签有问题。我创建了一个简单的页面，没有 css 文件，只是为了显示我的问题：

只需找到选择字段，尝试选择，然后所有内容都会上升，在页面顶部...

疯了:)

这里是html代码：

<

!DOCTYPE html>
<html>
<head>
<title>Depaco|Strap|Box|Analise</title></title>



</head>
<body>
<header>
<div class="container clearfix">
<p class="packing ">Depaco <span>Box</span></p>

            <nav>
                <ul>
                    <li><a href="#" class="curl-top-left">Depaco <span>Stretch</span></a></li>
                    <li><a href="strap.php" class="curl-top-left">Depaco <span>Strap</span></a</li>
                    <li><a href="#" class="curl-top-left">Depaco <span>Box</span></a</li>
                    <li><a href="#" class="curl-top-left">Depaco <span>Analyse</span></a</li>
                    <li><a href="#"><span>Calculator</span></a</li>
                </ul>
            </nav>
</div><!-- end containe -->
</header>
<div class="content clearfix">
<form>
<div class="container ">

<div class="left-box">
<p class="red">For theoretical compression strength of box, please fill all fields...</p>
<p class="grey">Depako box is a statistical method that gives the theoretical value of box compression strength. It applies to the RSC boxes.</p>
<div class="roki"><p class="text1-box">Characteristics of box</p></div>
<div class="box-box clearfix"> <!-- Box 1-->



<p class="text">Only for box without Inner carton (reinforcement) and
without laminating the box .</p>


</div><!-- END Box 1-->

</div><!-- end left -->

<div class="right-box">

<img src="" alt="Depako Box" Title="Depako Box" class="strap-img"></img></br></br>

    Here is problem: </br></br></br>

    <select>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell" selected>TRY</option>
<option value ="queenstown">Queenstown</option>
</select>

</br></br></br></br>
<p class="text">Technical requirements for theoretical of compression strength: </br></br>
Maximum dimension of box is: Lx Bx H= 550x 350x 350 mm</br></br>
Maximum grammage of corrugated fiberboard is: 900 g/m2</br></br>
For other cases, please contact us.</br>
</br></p></br></br>



</div><!-- end right -->


</form>
<div class="clearfix"></div>
<footer>
<div id="footer">
<div id="logo">
<img src="images/logo.png" alt="DEPACO logo"></img>

</div><!-- end logo -->






</div>
</div><!-- end container2 -->
</footer>


</div><!-- end content -->


</div><!-- end container -->
</body>
</html>

Tnx，P

【问题讨论】：

你的文档类型怎么样了？
令您惊讶的<select> 工作正常。
仅 JS Fiddle 的输出就应该指出存在不正确关闭的锚标记。
这是我的 Chrome 中的打印屏幕：picpaste.com/test-YfkOsWYH.jpg
因为您的整个页面都是一个链接，所以您单击它会刷新页面。这会将其移至顶部。

标签： html select

【解决方案1】：

也许您应该看看验证您的 HTML。
你的问题是这一行：

<li><a href="#"><span>Calculator</span></a</li>

应该是：

<li><a href="#"><span>Calculator</span></a></li>

您从未关闭过a 标签，因此它之后的所有内容都将成为链接的一部分，select 框也是如此。
因此，您单击的是链接，而不是 select 框。克服这类问题的一个好方法是使用一个好的编辑器来完成你的代码并突出显示问题。

另一个好方法是将您的代码放入http://validator.w3.org 并检查那里的错误。

【讨论】：

Tnx！是个问题！解决了！ Tnx 时间！

【解决方案2】：

我看到的唯一问题是您的一些</a> 标签被截断，所以它们只是</a。更正一下，对我来说一切正常。

【讨论】：

【解决方案3】：

您的许多标签未正确关闭（即</a 而不是</a>），这解决了它：http://jsfiddle.net/c7nge/1/

【讨论】：