label下面放置select的问题

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

html标签label的用法分两种：

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

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

          <label class="clearfix">
                 <b>城市</b><span class="s-red">*</span>

                 <div id="s-city-rel">
                     <select name="s1">
                         <option>1</option>
                     </select>
                     <select name="s2">
                         <option>2</option>
                     </select>
                     <select name="s3">
                         <option>3</option>
                     </select>
                 </div>
             </label>

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

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

希望有人能够给出解答。