奇怪的过渡行为与边界

我想创建一个导航栏。 <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

奇怪的过渡行为与边界

回答

相关问题