笔记来源:拉勾教育 - 大前端就业集训营
文章内容:学习过程中的笔记、感悟、经验
一、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>