处理display:inline-block样式ie浏览器兼容性视图不支持的问题

最新推荐文章于 2023-07-24 11:52:16 发布

转载最新推荐文章于 2023-07-24 11:52:16 发布 · 288 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dotnet-libo/p/3298547.html

本文详细介绍了如何在Internet Explorer的兼容性视图下，通过灵活运用float属性，解决多个块元素在同一行正常显示的问题。通过设置div元素为浮动布局，避免了display:inline-block在兼容性视图下的不兼容问题，同时保留了块元素的样式控制能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时，我们需要把块元素设置为inline-block，以便多个块元素可以同时显示在同一行。但是，ie的兼容性视图对display:inline-block样式并不支持。

如果设置为display:inline样式，又不能进行当作块元素来设置margin属性值，还有比如说一个div，设置了display:inline，既然设置了width属性值，在兼容性视图下显示时，width依然会变成0。

　　那怎么可以在ie浏览器的兼容性视图下，在同一行正常的可以显示多个块元素呢？

　　这里我们可以灵活的来运用float属性！

 <div>
        <div style="float: left; margin-right: 10px;">
            提出人
        </div>
        <div id="cName" runat="server" style="float: left; height: 22px; width: 130px; border: 1px solid #7b9ebd;
            margin-right: 50px;">
        </div>
        <div style="float: left; margin-right: 10px;">
            提出日期
        </div>
        <div id="cDate" runat="server" style="float: left; height: 22px; width: 130px; border: 1px solid #7b9ebd;">
        </div>
    </div>

我们只需设置float:left样式，就能解决这兼容性视图问题！

转载于:https://www.cnblogs.com/dotnet-libo/p/3298547.html