奇怪的過渡行爲與邊界

我想創建一個導航欄。 <div>應該包含在<a>中。所以，我創建了下面的代碼（降低，WebKit的只）：奇怪的過渡行爲與邊界

<!Doctype HTML> 
<html> 

<head> 
    <title>Example</title> 

    <style> 
     .menuStripItem { 
      float: left; 
      width: 25%; 
      height: 50px; 
      /* Vertical center */ 
      line-height: 50px; 
      /* Horizontal center */ 
      text-align: center; 
      border-radius: 2px; 
      /* smooth background modification */ 
      -webkit-transition: background-color linear 0.2s; 
     } 

      .menuStripItem:hover { 
       background-color: lightgrey; 
       border: 1px solid cadetblue; 
      } 
    </style> 
</head> 

<body> 

    <div> 
     <div> 
      <nav> 
       <ul style="list-style-type: none; padding-left: 0"> 
        <li class="menuStripItem"> 
         <a href="javascript:void(0)"> 
          <div>Menu1</div> 
         </a> 
        </li> 
        <li class="menuStripItem"> 
         <a href="javascript:void(0)"> 
          <div>Menu2</div> 
         </a> 
        </li> 
        <li class="menuStripItem"> 
         <a href="javascript:void(0)"> 
          <div>Menu3</div> 
         </a> 
        </li> 
        <li class="menuStripItem"> 
         <a href="javascript:void(0)"> 
          <div>Menu4</div> 
         </a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 

</body> 

</html>

當你試試吧，你會發現<div>小號反彈裏面的內容和一個<div>盤旋而被推成出新線。這可能是因爲邊框需要1px。

我想通了與CSS的解決方案：

.menuStripItem { 
     float: left; 
     width: 25%; 
     height: 50px; 
     /* Vertical center */ 
     line-height: 50px; 
     /* Horizontal center */ 
     text-align: center; 
     border-radius: 2px; 
     /* Ensures that adding a border doesn't increase the width of div */ 
     -webkit-box-sizing: border-box; 
     /* smooth background modification */ 
     -webkit-transition: background-color linear 0.2s; 
     /* Make sure content does not bounce PART1 no idea why this works*/ 
     -webkit-transition: font linear 1s; 
    } 

     .menuStripItem:hover { 
      background-color: lightgrey; 
      border: 1px solid cadetblue; 
      /* Make sure content does not bounce PART2 */ 
      margin-top: -1px; 
     }

的問題是我不知道爲什麼這個工程。我發現你通常會創建一個Transition具有多個屬性，但是當我使用

-webkit-transition: background-color linear 0.2s, font linear 1s;

它不工作了。這很混亂。

你知道發生了什麼事嗎？或者，也許你有更好的解決方案來修復彈跳鏈接？

來源

2013-07-12 Andy

+1對*「...我不知道爲什麼這個作品」*：P –

請添加一個JSFiddle –

它可以只通過.menuStripItem

border: 1px solid #FFFFFF;

我創建了一個搗鼓這個添加此CSS規則是固定的。

click for fiddle

的修復是懸停前時，有一個1px的邊界已經在那裏，懸停它只是取代了顏色。但是，如果您在懸停上添加更高像素的邊框，則當您懸停時，由於邊框寬度發生變化，您可以再次看到反彈效果。HTML框模型更好地解釋了這一點。

來源

2013-07-12 18:20:13 sa77

奇怪的過渡行爲與邊界

回答

相關問題