189 8069 5689
li inside-block在IE11为什么会换行无效？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！
近日在做一个网页标签列表，要求不能换行，一开始以为比较容易，三两下就把代码写完了，并且在Firefox和Chrome浏览器测试通过，不过，在IE11一看，却出人意料的没有达到预期效果，li inside-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核心代码如下：
出来的效果应该是这样：
使用 display:inline-block 可设置 li 列举不换行
而不是这样：
无 display:inline-block 时 li 列举换行
在京东网页html代码找到IE11无效的原因
上述问题困扰了我好几天，一度放弃了 li 列举的这种代码方式而采用 div 的写法，但是还是心有不甘，因为 li 的写法才是正道，且代码更加简洁。
今天在京东网浏览手机，侧栏的标签列表吸引了我，通过查看其网页html源码，发现它也是用 li 列举使用 display:inline-block 来实现的。
京东的标签列表
我决意一定要从京东的这张网页上找到同时适用IE11的标签列表代码。
一刻不能再等了，立即动手。
在本地搭建的调试环境新建一html文件，把京东网页的html源码复制过来，接着采用“排除法”逐步删减代码，直至最后只剩下这个标签列举的DIV。
通过一段时间的代码删减工作，最后剩下的代码越来越少，答案也应该越来越明朗了。
功夫不负有心人，最后终于找到了答案！困扰多天的问题终于得以解决了！
原来是网页
里需要加入这句：这句话的意思是，该网页不使用IE兼容性视图。
IE兼容性视图是使用低版本的IE浏览器来渲染网页，以免网页布局产生错乱，但现在我们明白了，兼容性视图会抹杀某些样式，使网页某些区块的布局不能达到预期效果。因此，在设计网页的时候，我们应该告诉IE浏览器不要使用兼容性视图来渲染此网页。
感谢各位的阅读！看完上述内容，你们对li inside-block在IE11为什么会换行无效大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。