IE浏览器兼容方法+几种网页布局

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、经验

一、IE浏览器兼容

1、html 兼容写法

html 中可以使用条件注释的方法，对 IE 进行特殊处理。
条件注释通过注释演变而来：普通的浏览器认为内部内容为注释，不进行加载，而指定的浏览器会正常加载代码内容。

<!--[if lte IE 9]>
<h2>小于等于IE9的浏览器可以看到</h2>
<![endif]-->

注：书写时，两个标签前面都要加！，中括号内的每个单词必须用空格分隔。

符号	含义
if	如果
endif	结束如果
lte	比较符号，小于等于
IE	浏览器的品牌名称
9	表示版本
lt	小于
gt	大于
gte	大于等于

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	
</head>
<body>
	<!--[if lte IE 8]>
		<h2>您的浏览器版本过低，不支持新特性，请更新浏览器</h2>
	<![endif]-->
	<!--注释内容-->
	<!--[if lte IE 9]>
		<h2>小于等于 IE9 的浏览器可以看到</h2>
	<![endif]-->
	<!--[if lt IE 8]>
		<h2>小于 IE8 的浏览器可以看到</h2>
	<![endif]-->
	<!--[if gte IE 8]>
		<h2>大于等于 IE8 的浏览器可以看到</h2>
	<![endif]-->
	<!--[if IE 7]>
		<h2>只有 IE7 浏览器可以看到</h2>
	<![endif]-->
</body>
</html>

2、CSS hack

开发人员书写一份代码上传到服务器，一份代码提供所有用户下载，用户的浏览器不同，会出现渲染效果不同。为了保证所有用户浏览器加载效果相同，需要在同一份代码中书写不同的结构给不同的浏览器，这种方法就叫做 hack 方法（Hacker 黑客）。
hack 方法就是在同一份代码中给不同的浏览器书写不同的 css，保证最终加载效果一致。

hack 符号	兼容浏览器
- _ (属性名前面)	IE6 及以下
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > I (属性名前面)	IE7 及以下
\0/ (属性值后面)	仅 IE8
\0 (属性值后面)	IE8 及以上
\9 (属性值后面)	\9 (属性值后面)
* html .selector {}	IE6 及以下
.selector, {}	IE7 及以下
html > body .selector {}	不兼容 IE6 及以下
html > /**/ body .selector {}	不兼容 IE6 及以下
head ~ /* */ body .selector {}	不兼容 IE6 及以下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>		
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: skyblue;	
			/*IE6及以下*/
			/* _background-color: pink; */
			/*IE7及以下*/
			/* ?background-color: green; */
			/*IE8*/
			/* background-color: gold\0/; */
			/*IE8及以上*/
			/* background-color: red\0; */
			/*IE10及以下*/
			/* background-color: red\9; */		
		}
		* html .box{
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
		}
		/*.box{
			_width: 200px;
			_height: 200px;
			_background-color: yellowgreen;
		}*/		

		/*IE7及以下*/
		/*.box,{
			width: 200px;
			height: 200px;
			background-color: pink;
		}*/

		/*除了IE6*/
		/* html>body .box{
			border: 3px solid red;
		} */

		/*除了IE67*/
		/* html>body .box{
			border: 4px solid green;
		} */
	</style>

</head>
<body>	
	<div class="box"></div>	
</body>
</html>

3、示例

点击该链接可以看到用代码写的机器猫，放到不同版本的IE浏览器观察情况

谷歌浏览器

IE11

IE8

二、几种网页布局

两列自适应布局：一列由内容撑开，另一列撑满剩余宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .content {
      width: 1000px;
      height: 500px;
      background-color: lightblue;
    }
    .left {
      float: left;
      background-color: pink;
    }
    .left img {
      width: 400px;
    }
    .right {
      height: 300px;
      /* 触发 BFC，不会与浮动的元素重叠 */
      overflow: hidden;
      background-color: lightyellow;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="left">
      <p>左侧盒子宽度自适应内容宽度</p>
      <img src="images/smile01.jpg" alt="">
    </div>
    <div class="right">
      <p>右侧盒子占有父级剩余的宽度部分</p>
    </div>
  </div>
</body>
</html>

圣杯布局、双飞翼布局：两边固定宽度，中间自适应

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      position: relative;
      box-sizing: border-box;
      max-width: 1500px;
      height: 500px;
      /* 用内边距为左右固定的两个子元素留取空位 */
      padding-left: 200px;
      padding-right: 200px;
      margin: 0 auto;
      background-color: lightyellow;
    }
    /* 定位在左侧，padding 区域 */
    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 190px;
      height: 300px;
      background: skyblue;
    }
    /* 定位在右侧，padding 区域 */
    .center {
      width: 100%;
      height: 400px;
      background: yellowgreen;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 190px;
      height: 400px;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="center">
      <h2>圣杯布局，中间自适应宽度</h2>
    </div>
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧固定宽度</div>
  </div>

</body>

</html>

等高布局：子元素在父元素中高度相等

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      position: relative;
      box-sizing: border-box;
      max-width: 1500px;
      /* 父级不设置高度，被中间标准流内容撑开 */
      /* 用内边距为左右固定的两个子元素留取空位 */
      padding-left: 200px;
      padding-right: 200px;
      margin: 0 auto;
      background-color: lightyellow;
    }
    /* 定位在左侧，padding 区域 */
    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 190px;
      /* 高度设置为父级的 100%，与父级共同变化 */
      height: 100%;
      background: skyblue;
    }
    /* 定位在右侧，padding 区域 */
    .center {
      width: 100%;
      height: 500px;
      background: yellowgreen;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 190px;
      height: 100%;
      background: skyblue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="center">
      <h2>等高布局，中间自适应宽度，自身高度决定父级高度</h2>
    </div>
    <div class="left">左侧固定宽度，高度自动等于中间内容高度</div>
    <div class="right">右侧固定宽度，高度自动等于中间内容高度</div>
  </div>

</body>

</html>

粘连布局：垂直方向，后面的元素在前面元素足够高时，紧跟在前面元素底部，前面元素高度不够时，后面的元素自动加载到页面的底部。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    .wrapper {
      min-height: 100%;
      padding-bottom: 100px;
      box-sizing: border-box;
      background: lightyellow;
      text-align: center;
      overflow: hidden;
    }
    .wrapper .main {
      background-color: skyblue;
    }
    .wrapper .main p {
      height: 500px;
    }
    .footer {
      height: 100px;
      margin-top: -100px;
      line-height: 50px;
      background: pink;
      text-align: center;
    }    
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="main">
      <p>主体内容 1</p>
      <p>主体内容 2</p>
      <p>主体内容 3</p>
    </div>
  </div>
  <div class="footer">底部</div>

</body>

</html>

三、下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    select {
      width: 150px;
      /* 右边距，留给小三角，避免被文字压盖 */
      padding: 0 20px 0 4px;
      border: 1px solid #c3c2be;
      margin: 0px 18px 0px 0px;
      border-radius: 5px 5px 5px 5px;
      font-size: 12px;
      outline-style: none;
      resize: none;
      line-height: 22px;
      size: 5;

      /* 清除下拉菜单默认样式 */
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;

      /* 设置新的小三角背景 */
      background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat 130px center;

    }

    option {
      height: 20px;
    }
    /*滚动条宽度*/
    select::-webkit-scrollbar {
      width: 10px;
    }

    /*滚动条里面小方块*/
    select::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }

    /*滚动条里面轨道*/
    select::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
  </style>
</head>

<body>
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>厦门</option>
    <option>海南</option>
    <option>重庆</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>厦门</option>
    <option>海南</option>
    <option>重庆</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>厦门</option>
    <option>海南</option>
    <option>重庆</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>厦门</option>
    <option>海南</option>
    <option>重庆</option>
  </select>
</body>

</html>