就是点击按钮 布局会变 应该只是内容元素消失或者出现的 但是点击按钮时内容元素会向下移动一部分，就是布局会变
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } .tabul li{ cursor: pointer; } .tabitem{ width: 100px; height: 100px; background: green; display: inline-block; margin-left: 30px; } #tab .tabitem div{ width: 100px; height: 100px; background: red; display: inline-block; /*display: none;*/ } </style> </head> <body> <div id="tanContainer"> <div id="tabNav"> <ul class="tabul"> <li data-tab='tab1'>标题一</li> <li data-tab='tab2'>标题二</li> <li data-tab='tab3'>标题三</li> <li data-tab='tab4'>标题四</li> <li data-tab='tab5'>标题5</li> </ul> </div> <div id="tab"> <div class="tabitem"> <div id="tab1"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> </div> <div class="tabitem"> <div id="tab2"> <ul> <li>2</li> <li>2</li> <li>2</li> <li>2</li> </ul> </div> </div> <div class="tabitem"> <div id="tab3"> <ul> <li>3</li> <li>3</li> <li>3</li> <li>3</li> </ul> </div> </div> <div class="tabitem"> <div id="tab4"> <ul> <li>4</li> <li>4</li> <li>4</li> <li>4</li> </ul> </div> </div> <div class="tabitem"> <div id="tab5"> <ul> <li>5</li> <li>5</li> <li>5</li> <li>5</li> </ul> </div> </div> </div> </div> <script src="jiantou/jquery-1.8.2.js"></script> <script> function tab(pid){ var tabs=["tab1","tab2","tab3","tab4","tab5"]; for(var i=0;i<tabs.length;i++){ if(tabs[i]==pid){ $('#'+tabs[i]).fadeIn(200) }else{ $('#'+tabs[i]).fadeOut(200) } } } $('.tabul').on('click','li',function(){ var tabmsg=$(this).data() tab(tabmsg.tab) }) </script> </body> </html>解决方案
这不是bug，你让里面的元素由display:none变成inline-block后，他外层元素的基线变了。绿色不显示内部的时候基线时其底部，红色显示内部后，基线时其内部红色的基线。
参考zxx对规范的翻译
一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
来源文章