liinside-block在IE11换行无效的原因-

li inside-block在IE11照样换行？

li inside-block 在IE11照样换行！为何无效？难道代码还要hack一下IE11？但我看别人网站里的写法并没有hack IE11。

其实代码挺简单，在Chrome和Firefox浏览器完全达到预期效果。

css核心代码如下：

ul li{
    display:inline-block;
    padding:3px 4px 3px 4px;
    margin:3px 3px 3px 0px;
}

使用 display:inline-block 可设置 li 列举不换行。

html核心代码如下：

    
tag1
    
tag2
    
tag3

出来的效果应该是这样：

京东的标签列表

我决意一定要从京东的这张网页上找到同时适用IE11的标签列表代码。

一刻不能再等了，立即动手。

在本地搭建的调试环境新建一html文件，把京东网页的html源码复制过来，接着采用“排除法”逐步删减代码，直至最后只剩下这个标签列举的DIV。

通过一段时间的代码删减工作，最后剩下的代码越来越少，答案也应该越来越明朗了。

功夫不负有心人，最后终于找到了答案！困扰多天的问题终于得以解决了！

原来是网页 里需要加入这句：

这句话的意思是，该网页不使用IE兼容性视图。

IE兼容性视图是使用低版本的IE浏览器来渲染网页，以免网页布局产生错乱，但现在我们明白了，兼容性视图会抹杀某些样式，使网页某些区块的布局不能达到预期效果。因此，在设计网页的时候，我们应该告诉IE浏览器不要使用兼容性视图来渲染此网页。

以上就是li inside-block在IE11换行无效的原因的详细内容，更多请关注 第一PHP社区 其它相关文章！