表單2-下拉式功能表

標籤：style   blog   http   color   os   使用   io   for   ar   

 

 

 

/* 表單2 */ form.bs-docs-example {  position: relative;  width: 600px;  margin: 15px auto;  padding: 39px 19px 14px;  background-color: white;  border: 1px solid #DDD;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px; }

form.bs-docs-example::after {  content: "Example";  position: absolute;  top: -1px;  left: -1px;  padding: 3px 7px;  font-size: 12px;  font-weight: bold;  background-color: #F5F5F5;  border: 1px solid #DDD;  color: #9DA0A4;  -webkit-border-radius: 4px 0 4px 0;  -moz-border-radius: 4px 0 4px 0;  border-radius: 4px 0 4px 0; }

 

div.input-prepend{  position: relative;  display: inline-block;  margin: 10px;  font-size: 0;  white-space: nowrap;  vertical-align: middle;  box-sizing: border-box; } div.btn-group {  position: relative;  display: inline-block;  font-size: 0;  white-space: nowrap;  vertical-align: middle; } button.dropdown-toggle {  display: inline-block;  padding: 4px 12px;  margin-bottom: 0;  margin-right: -1px;  height: 30px;  line-height: 20px;  border: 1px solid #CCC;  border-radius: 4px 0 0 4px;  font-size: 14px;  color: #333;  text-align: center;  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);  cursor: pointer;  background-color: #e5e5e5;

}

span.caret {  display: inline-block;  content: "";  width: 0;  height: 0;  margin-top: 8px;  vertical-align: top;  border-top: 4px solid black;  border-right: 4px solid transparent;  border-left: 4px solid transparent; }

input.span2 {  display: inline-block;  padding: 4px 12px;  height: 20px;  line-height: 20px;  vertical-align: top;  }

.clear {  clear: both; }

ul.dropdown-menu li {  heiht: 20px;  line-height: 20px; }

ul.dropdown-menu li a {  display: block;  padding: 3px 20px;  clear: both;  font-weight: normal;  line-height: 20px;  color: #333;  white-space: nowrap; }

 ul.dropdown-menu  {  display: block;  position: absolute;  top: 100%;  left: 0;  font-size: 14px;  float: left;  min-width: 160px;  padding: 5px 0;  margin: 2px 0 0;  list-style: none;  background-color: white;  border: 1px solid #CCC;  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  -webkit-background-clip: padding-box;  -moz-background-clip: padding;  background-clip: padding-box; }

ul.dropdown-menu li.divider {  height: 2px;  margin: 9px 1px;  overflow: hidden;  background-color: #E5E5E5;  border-bottom: 1px solid #fff;  }

 

 

<!-- 表單2 -->
<form class="bs-docs-example">
 <div class="input-prepend">
  <div class="btn-group">
   <button class="dropdown-toggle">
    Action
    <span class="caret"></span> 
   </button>
   <ul class="dropdown-menu">
    <li><a href="#">中國</a></li>
    <li><a href="#">英國</a></li>
    <li><a href="#">法國</a></li>
    <li class="divider"></li>
    <li><a href="#">加拿大</a></li>
    <div class="clear"></div>
   </ul>
  </div>
  <input type="text" class="span2"/>
  
 </div>

</form>

 

 

 

* 

IE6下hover偽類顯示隱藏子項目bug及解決方案

 

HTML代碼及CSS代碼：

這段代碼在除了ie6外的其他瀏覽器中均能完美呈現，可一到ie6就出問題了。

BUG1：子項目不顯示

在ie6下，當滑鼠hover到a元素時，b元素並沒有如預期所想顯示出現。

周所周知，ie6/7的bug大多數可通過出發hasLayout來解決，那麼我們可以試想一下是否能通過觸發hasLayout來解決。由於a、b元素已經有了寬高，已經觸發了hasLayout，那麼是否可以在a的偽類上觸發呢？

嘗試添加以下代碼：

1

.a:hover{

2

zoom:1;

3

}

再看看ie6，問題已經得到解決，hover時b元素可以正常顯示。

BUG1解決方案：

為hover偽類添加zoom:1屬性，觸發偽類的hasLayout。

目前CSS代碼如下：

 

但是，當我們把滑鼠移開a元素後，發現ie6下b元素沒有全部消失。

 

BUG2：子項目hover後不消失

這個bug有點詭異，估計是渲染的時候出了錯，ie6經常會有這種莫名其妙的問題，由於a、b元素及a的偽類均觸發了hasLayout，目前能觸發hasLayout的元素已經不存在了，因此觸發hasLayout的這個方案暫時可以放棄。

轉變一下思路，既然問題出在display上，那麼不改變b元素的display屬效能否解決這個bug呢？

那麼，我們在不改變display屬性的情況下嘗試用另外一種方法將b元素進行顯示、隱藏。

方案一：

hover前為a元素添加overflow:hidden，hover後改變overflow的值為visible，並去掉對b元素display屬性的修改，代碼如下：

 

問題得到解決，ie6下效果完美。

等等。。。

如果某些情況不能通過改變overflow的值時，能否有另外一種解決方案？

關於元素顯示隱藏的css屬性，除了display外，還有另外一個屬性：visibility，那麼，能否使用這個屬性來解決問題呢？

方案二：

為ie6的b元素添加visibility屬性，代碼如下：

 

 

ie6下測試通過，看來這個方案也可行。關於display及visibility屬性的不同，可自行google查閱，此處不做討論。

當然，相信有同學已經想到另外一種對b元素進行顯示及隱藏的方法，通過改變b元素的left/top/right/bottom值實現，此處以left值為例，代碼如下：

這樣在ie6下也可以實現顯示、隱藏元素的效果，解決方案多多，也許還有其他不同的方案，歡迎大家一起探討！

BUG2解決方案：

1. 通過改變hover偽類元素的overflow值來隱藏顯示子項目；

2. 通過visibility屬性來顯示隱藏子項目；

3. 通過改變子項目left/top/right/bottom的值進行元素的顯示及隱藏。

 

表單2-下拉式功能表