gpt4 book ai didi

html - Bootstrap Grid IE 8 兼容性

转载 作者:太空宇宙 更新时间:2023-11-03 23:14:31 25 4
gpt4 key购买 nike

我正在使用 bootstrap 3,因为有人告诉我它与 Explorer 8 兼容。我之前使用的是 foundation。

但我试图使 Bootstrap 网格在资源管理器上工作但没有成功。

当我在 Firefox 上使用网格时,它很简单。您使用带有类行的 div 和放置类 col-md-* 的子 div。

这在 Firefox 上有效,但在 Explorer 8 上它只是将 div 嵌套在彼此之上。

我设法让它在 Firefox 和 Explorer 8 上使用 col-xs-*。但是,当我更改窗口的大小以模拟它在移动设备上的显示方式时,它只是拉伸(stretch) div,而不是像预期的那样将它们堆叠在一起。

现在我有一个困境。 Col-xs 在 Explorer 上工作,但它没有响应。 Cols-md 适用于除 Explorer 8 之外的所有设备。

这是我的测试代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf8" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Bootstrap test</title>
</head>
<body>
<div class="main container-fluid">
<header class="jumbotron text-center">
<h1>Bootstrap test</h1>
</header>
<section class="row">
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
</div>
<div class="col-md-3">
<h3>Menu</h3>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
</div>
</section>
</div>
</body>
</html>

以上代码适用于 Firefox,但不适用于 Explorer 8。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf8" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Bootstrap test</title>
</head>
<body>
<div class="main container-fluid">
<header class="jumbotron text-center">
<h1>Bootstrap test</h1>
</header>
<section class="row">
<div class="cols-xs-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
</div>
<div class="cols-xs-3">
<h3>Menu</h3>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
</div>
</section>
</div>
</body>
</html>

此代码适用于 Explorer,但没有响应。

enter image description here

最佳答案

我在这篇文章的评论中找到了答案:

http://www.joostrap.com/blog/bootstrap-3-supporting-internet-explorer-8-and-9

For us this was solved by making sure the Respond js loads AFTER the css.

我还将 col-xs 更改为 col-sm,现在即使在 1024x768 分辨率下,它也能在 Firefox 和 Explorer 8 上产生奇迹。

关于html - Bootstrap Grid IE 8 兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31149792/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com