摘要
我們在對組件進行定製開發的過程中會遇到許多的問題和各種兼容性的問題，我們要不斷嘗試去解決這些問題，並記下自己解決過程，這種方式也是一個不錯的學習積累的過程。
頁面展示效果如圖：
在對下拉菜單進行定製開發的過程中，出現了 border 斷線的現象，並且在縮放頁面或者點擊下拉菜單的時候，邊框會再次出現，而另一組與它共享同一個樣式的下拉菜單並沒有出現這樣的問題，這個問題困擾了很久。然後對問題一步步進行了分析：
1、猜測是否只在 Google chrome 下才會出現這樣的問題。
至此，我將項目在 Firefox 下重新運行，發現不存在邊框斷線的問題。
所以可以推斷出是Google Chrome瀏覽器的兼容問題。
2、猜測是否是 Google Chrome 解析代碼的時候優先級的問題。
將相應的 div 設置 Z-index 使它強制顯示，發現當前的問題解決了，但是又出現的心得問題。與它共享樣式的兄弟 div 覆蓋了它本身的子孫元素。
如圖：
由於這裏涉及到子孫元素的下一級，像這種四級甚至更多級的 Z-index的優先級的問題，網上很少有人提及，我們不可能在開發的過程中去更改複雜的邏輯解構，所以這種方式去解決問題成本太大。
3、猜測是否和 IE 瀏覽器下才會出現的 border 邊框斷線現象原理一樣。
即在滾動滾動條時有些邊框莫名其妙的有一部分不顯示（邊框顯示不完整）。
出現 border 邊框斷線問題的場景是：
當容器內有兩個浮動，並使用 clear 清除浮動時，在 ie 下拖動滾動條時最外層的 border 會消失。
例如下面的代碼：
<div style="border:1px #ccc solid;">
<div style="float:left;">sdf</div>
<div style="float:left;">
<p>df</p><p>df</p><p>df</p><p>df</p><p>df</p><p>df</p><p>df</p>
</div>
<div style="clear:both;"></div>
</div>
就會出現IE 下的 border 邊框斷線的 BUG。
解決的方式如下：
（1）在父元素中加入height:1% 。
（2）給父元素設置一個寬度或高度 。
（3）給父元素設置一個背景色。
結合自己的問題發現，在給下拉菜單添加樣式的時候並沒有給子元素添加浮動，所以排除了這種假設。
4、猜測是否是border 邊框的問題。
當我給邊框設置2px 的時候發現，邊框部分顯示1px，而且顯示異常的部分也是隨機的。
至此，我們可以推斷在Google Chrome 在特定情況下，會有1px 的顯示異常，我們不可能在開發的時候就直接給2px就完事了，這與我們解決問題的最終結果相去甚遠。既然是邊框的問題，有可能是 Google Chrome的顯示頁面不穩定，那麼我們可以設置 Google Chrome的縮放比例。這裏就用到了CSS3的 transform 來對我們的 px 進行略微放大，既然是 Google Chrome，那麼它的內核就是 webkit，所以我們只需要寫出 Google Chrome 下的兼容代碼就可以了，代碼如下：
-webkit-transform:scale(1.01);
這樣在指明瞭在 webkit 內核下重新進行縮放，那麼它的不穩定因素也就消失了，而且將原有的1px 放大到原來的1.01倍，在視覺效果上看不出什麼不同。
總結
從整體到局部漸進式的去排除問題，可以大大的增加我們的效率，讓我們在工作中做更多的事情。在特定情況下，Google Chrome 會出現1px 邊框的斷線現象，雖然不清楚這個 BUG 的原理是什麼，但是方法都是一樣的，既然1px 顯示有問題，那麼我們可以兼容 Google Chrome 寫出相應的代碼去解決這個問題。