没写DOCTYPE造成的bootstrap对IE8的不兼容

最新推荐文章于 2022-05-28 21:30:55 发布

csssy003

最新推荐文章于 2022-05-28 21:30:55 发布

阅读量2k

点赞数

分类专栏： css 文章标签： css bootstrap ie8 前端兼容性

本文链接：https://blog.csdn.net/csssy003/article/details/25727545

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于不是专业前端,不想再和没完没了的HTML样式问题做斗争了,今天愤然研究bootstrap,确实是个好东西!

可是测试代码在IE8上跑的时候不出所料又出问题了,于是我按照网上的介绍引入了respond.js,可是还是不行,继续在百度上谷歌始终找不到进一步的答案了...

HTML代码:

<html>
<head>
	<meta charset="utf-8">
	<script src="js/jq.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<!-- IE支持 -->
	
	<script src="js/ie_support/respond.min.js"></script>
</head>
<body>
<style type="text/css">
.btn:hover {
	color: yellow;
	font-weight: bold;
	background-color: blue;
}
.btn {
	color: green;
}
</style>
<div class="container">
  <div class="row">
  	<div class="col-md-9">
  		<h1 >测试1<small>123</small></h1>
  		<div class="row">
  			<div class="col-md-6" style="background-color: blue;">
  				<h2>测试2</h2>
  			</div>
  			<div class="col-md-6" style="background-color: blue;">
  				<h2>测试3</h2>
  			</div>
  		</div>
  		<h1 >测试4</h1>
  	</div>
	
  </div>
  <div class="row">
	<input type="button" value="按钮" class="btn"/>
	<a href="#" class="col-md-4 col-md-offset-4">Skip to main content</a>
  </div>
	
</div>
</body>
</html>

以下是症状

FF下:

IE8下:

再次刷新又变成:

我挠头了半个下午,按下F12查看的时候突然想到IE8中的元素始终没有剧中是不是DOCTYPE没加造成?!

结果我在<html>标签上方加了一行:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

问题解决了!

教训:以后写HTML一定要加上这句啊!!!!!