首頁手記 IE8寬度自適應-替換媒體查詢--以設置bootstr...

IE8寬度自適應-替換媒體查詢--以設置bootstrap彈窗寬度為例

標簽：

Html/CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="tips" content="

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

">
<meta name="author" content="[email protected]">
<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>

點擊查看更多內容