li inside-block在IE11为什么会换行无效

发布时间:2020-10-20 16:23:50 作者:小新
来源:亿速云 阅读:239

li inside-block在IE11为什么会换行无效?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

近日在做一个网页标签列表,要求不能换行,一开始以为比较容易,三两下就把代码写完了,并且在Firefox和Chrome浏览器测试通过,不过,在IE11一看,却出人意料的没有达到预期效果,li inside-block 在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核心代码如下:

<ul>
    <li>tag1</li>
    <li>tag2</li>
    <li>tag3</li>
</ul>

出来的效果应该是这样:

li inside-block在IE11为什么会换行无效

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

而不是这样:

li inside-block在IE11为什么会换行无效

无 display:inline-block 时 li 列举换行

在京东网页html代码找到IE11无效的原因

上述问题困扰了我好几天,一度放弃了 li 列举的这种代码方式而采用 div 的写法,但是还是心有不甘,因为 li 的写法才是正道,且代码更加简洁。

今天在京东网浏览手机,侧栏的标签列表吸引了我,通过查看其网页html源码,发现它也是用 li 列举使用 display:inline-block 来实现的。

li inside-block在IE11为什么会换行无效

京东的标签列表

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

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

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

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

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

原来是网页 <head></head> 里需要加入这句:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

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

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

感谢各位的阅读!看完上述内容,你们对li inside-block在IE11为什么会换行无效大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. CSS如何让li 4个一行显示
  2. 利用li标签做菜单

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

li inside-block ie11 side

上一篇:css中flaot浮动的原因与副作用是什么

下一篇:云主机怎样选购

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》