label下面放置select的问题

今天做项目的时候突然发现一个问题。

html标签label的用法分两种：

1. <label for="name">姓名：</label><input id="name" name="name" placeholder="姓名">
2. <label>姓名：<input id="name" name="name" placeholder="姓名"></label>

今天做项目的时候这样写了一段代码：

 1          <label class="clearfix">
 2                 <b>城市</b><span class="s-red">*</span>
 3 
 4                 <div id="s-city-rel">
 5                     <select name="s1">
 6                         <option>1</option>
 7                     </select>
 8                     <select name="s2">
 9                         <option>2</option>
10                     </select>
11                     <select name="s3">
12                         <option>3</option>
13                     </select>
14                 </div>
15             </label>

其中的三个select是联动的，这时候就出现问题了，在低版本的chrome或者火狐上面，点击第二个或者第三个select时，弹出下拉菜单后，立刻又弹上去了。

经过反复测试，只好把#s-city-rel放在label外面，这样才能够没有影响。

希望有人能够给出解答。

转载于:https://www.cnblogs.com/yanyalun/p/4303637.html