为了账号安全,请及时绑定邮箱和手机立即绑定

IE8宽度自适应-替换媒体查询--以设置bootstrap弹窗宽度为例

标签:
Html/CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="tips" content="

为了以后方便,把常用的小效果制作整理,如有问题或者更好的方法,请告知!谢谢!!!!

">
<meta name="author" content="30860662@qq.com">
<title>Bootstrap--弹出框-宽度兼容IE8的方法</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--[if lt IE 9]>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style type="text/css">
/*浏览器*/
.IE8-maxWidth600{
    max-width:600px;
    margin:50px auto;
}
/*

前言:
IE8因为不兼容CSS3,bootstrap 的很多效果都显示不了,比如圆角之类的。
要是兼容IE8,需要引入其他JS,在性能上会有影响。
如果测试可以容忍其它效果在IE8不一样的话 ,但是弹窗在IE8下面会变成100%宽度,这个就太不能忍了。
如果把ie8写为固定宽度,那就失去了bt的精随。

先简单介绍一下:bt用的随浏览器宽度来判断弹框宽度是CSS3的媒体查询.

通过IE注释来判断IE8,给iE8加样式

*/
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.8.1.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script><!--要放到jquery引用下方,因为他是以其为基础的-->
</head>
<body>
<!--方法一弹窗-->
<div class="modal" id="mymodal1" tabindex="-1">
    <div class="modal-dialog">
    <!--[if IE 8]> <div class="modal-dialog IE8-maxWidth600" ><![endif]--><!--给IE8添加了样式maxWidth800-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">方法一弹窗</h4>
            </div>
            <div class="modal-body">
                <p>方法一弹窗</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    <!--[if IE 8]></div><![endif]-->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="btnbox">
    <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal1" type="button">添加注释来判断IE8版本-替代媒体查询</button>
</div>

</body>
</html>
点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消