Article content: notes, feeling and experience in the process of learningCopy the code

I. Compatibility with Internet Explorer

1, HTML compatible writing method

  • HTML can use conditional comment method, IE for special processing.
  • Conditional comments evolved through comments: normal browsers consider internal content to be comments and do not load, while the specified browser loads code content normally.
<! --[if LTE IE9]> <h2> Browsers less than or equal to IE9 can see </h2> <! [endif]-->
Copy the code

Note: When writing, add both labels before! Each word in brackets must be separated by a space.

symbol meaning
if if
endif If the end of
lte Compare symbols, less than or equal to
IE Brand name of the browser
9 Said version
lt Less than
gt Is greater than
gte Greater than or equal to 
<! DOCTYPEhtml 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 > Your browser version is too low to support new features, please update your browser </ H2 > <! [endif]-->
	<! -- Comment content -->
	<! --[if LTE IE9]> <h2> Browsers less than or equal to IE9 can see </h2> <! [endif]-->
	<! --[if lt IE8]> <h2> </h2> [endif]-->
	<! --[if gte IE8]> <h2> </h2> [endif]-->
	<! --[if IE7]> <h2> Only IE7 can see </h2> <! [endif]-->
</body>
</html>
Copy the code

2, CSS hack

  • Developers write a piece of code and upload it to the server. A piece of code is available for all users to download. Different browsers of users will have different rendering effects. To ensure that all users have the same browser loading effect, you need to write different structures in the same code for different browsers. This method is called hack.
  • The hack method is to write different CSS in the same code for different browsers to ensure that the final load is consistent.
Hack symbol Compatible browser
-_ (before the attribute name) 6 and the following
! $& * () = % + @,. / ‘[] # ~? : < > I (before the attribute name) Ie 7 and below
\0/ (after attribute value) Only IE8
\0 (after the attribute value) Internet explorer 8 and above
\9 (after attribute value) \9 (after attribute value)
* html .selector {} 6 and the following
.selector, {} Ie 7 and below
html > body .selector {} Incompatible with IE6 and below
html > /**/ body .selector {} Incompatible with IE6 and below
head ~ /* */ body .selector {} Incompatible with IE6 and below 
<! DOCTYPEhtml 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 and below */
			/* _background-color: pink; * /
			/*IE7 and below */
			/ *? background-color: green; * /
			/*IE8*/
			/* background-color: gold\0/; * /
			/*IE8 and above */
			/* background-color: red\0; * /
			/*IE10 and below */
			/* background-color: red\9; * /		
		}
		* html .box{
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
		}
		/*.box{ _width: 200px; _height: 200px; _background-color: yellowgreen; } * /		

		/*IE7 and below */
		/*.box,{ width: 200px; height: 200px; background-color: pink; } * /

		/ * in addition to the 6 * /
		/* html>body .box{ border: 3px solid red; } * /

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

</head>
<body>	
	<div class="box"></div>	
</body>
</html>
Copy the code

3, sample

Click on this link to see doraemon written in code and put it in different versions of IE to see how it works

Google Chrome

IE11

IE8

Two, several web layout

  • An adaptive layout of two columns: one is spread out by the content and the other fills the remaining width
<! DOCTYPEhtml>
<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;
      /* Triggers a BFC that does not overlap with floating elements */
      overflow: hidden;
      background-color: lightyellow;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="left">
      <p>The left box width ADAPTS to the content width</p>
      <img src="images/smile01.jpg" alt="">
    </div>
    <div class="right">
      <p>The right box occupies the remaining width of the parent</p>
    </div>
  </div>
</body>
</html>
Copy the code
  • Grail layout, twin wing layout: fixed width on both sides, adaptive in the middle
<! DOCTYPEhtml>
<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;
      /* Use two child elements with fixed inner margins */
      padding-left: 200px;
      padding-right: 200px;
      margin: 0 auto;
      background-color: lightyellow;
    }
    /* Positioned to the left, the padding area */
    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 190px;
      height: 300px;
      background: skyblue;
    }
    /* Positioned to the right, the padding area */
    .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>Grail layout, adaptive width in the middle</h2>
    </div>
    <div class="left">Left fixed width</div>
    <div class="right">Fixed width on right side</div>
  </div>

</body>

</html>
Copy the code
  • Isometric layout: Children are of equal height in their parent
<! DOCTYPEhtml>
<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;
      /* The parent level does not set the height and is supported by the intermediate standard stream content */
      /* Use two child elements with fixed inner margins */
      padding-left: 200px;
      padding-right: 200px;
      margin: 0 auto;
      background-color: lightyellow;
    }
    /* Positioned to the left, the padding area */
    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 190px;
      /* The height is set to 100% of the parent, which varies with the parent */
      height: 100%;
      background: skyblue;
    }
    /* Positioned to the right, the padding area */
    .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>Contour layout, middle adaptive width, its own height determines the parent height</h2>
    </div>
    <div class="left">Left fixed width, height automatically equal to middle content height</div>
    <div class="right">Fixed width on right side, height automatically equal to middle content height</div>
  </div>

</body>

</html>
Copy the code
  • Stick layout: Vertical, where the following element is placed at the bottom of the previous element when the previous element is tall enough, and the following element automatically loads to the bottom of the page when the previous element is not tall enough.
<! DOCTYPEhtml>
<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>Body Content 1</p>
      <p>Body Content 2</p>
      <p>Body Content 3</p>
    </div>
  </div>
  <div class="footer">At the bottom of the</div>

</body>

</html>
Copy the code

Drop down menu

<! DOCTYPEhtml>
<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;
      /* The right margin is left for a small triangle to avoid being overwhelmed by text */
      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;

      /* Clear the dropdown menu default style */
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;

      /* Set a new triangle background */
      background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat 130px center;

    }

    option {
      height: 20px;
    }
    /* Scroll bar width */
    select::-webkit-scrollbar {
      width: 10px;
    }

    /* Small box inside scroll bar */
    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);
    }

    /* Track inside scroll bar */
    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>Beijing</option>
    <option>Shanghai</option>
    <option>Guangzhou</option>
    <option>shenzhen</option>
    <option>xiamen</option>
    <option>hainan</option>
    <option>chongqing</option>
    <option>Beijing</option>
    <option>Shanghai</option>
    <option>Guangzhou</option>
    <option>shenzhen</option>
    <option>xiamen</option>
    <option>hainan</option>
    <option>chongqing</option>
    <option>Beijing</option>
    <option>Shanghai</option>
    <option>Guangzhou</option>
    <option>shenzhen</option>
    <option>xiamen</option>
    <option>hainan</option>
    <option>chongqing</option>
    <option>Beijing</option>
    <option>Shanghai</option>
    <option>Guangzhou</option>
    <option>shenzhen</option>
    <option>xiamen</option>
    <option>hainan</option>
    <option>chongqing</option>
  </select>
</body>

</html>
Copy the code