vertical centering of images)

1. IE browser mode Hack logo
1. CSS hack logo

Copy code

The code is as follows:

ie6 { _property: value; }
ie7 { +property: value; }
ie9 { property: value\9\0; }
lte ie7 { *property: value; }
gte ie8 { property: value\0; }
all ie { property: value\9; }
/*Note: It is not recommended to use hack unless it is absolutely necessary. If you use the hack flag, you must test each browser (including the new IE browser)*/

2. IE browser environment Hack logo
2.1. All IE browsers

Copy code

The code is as follows:

<!--[if IE]>
<script>alert('ie');</script>
<![endif]

2.2. Non-IE browsers

Copy code

The code is as follows:

<!--[if !IE]>
<script>alert('!ie');</script>
<![endif]

2.3. Single IE version

Copy code

The code is as follows:

<!--[if IE version number]>
<script>alert('ie version number');</script>
<![endif]

2.4. Greater than or equal to the IE version number

Copy code

The code is as follows:

<!--[if gte IE version number]>
<script>alert('gte IE version number');</script>
<![endif]

2.5, less than or equal to the IE version number

Copy code

The code is as follows:

<!--[if lte IE version number]>
<script>alert('lte IE version number');</script>
<![endif]

2. Some common problems encountered in the code
1. Some issues that should be paid attention to when using float layout
1.1. When using float layout in IE6, it will cause double margins. The solution is to set display to inline.
1.2. After using float (or absolute positioning), an inline element automatically becomes a block-level element. You can directly set the width and height without setting display: block.
1.3. In IE7, if there are multiple rows of elements with float: left; margin-bottom: 20px;, the outer bottom margin of the last row of elements will be invalid;
1.4. In IE6 and 7, when the ul and ol list elements use float layout, there will be several pixels of blank space on the left and the content. The solution is to set list-style to outside;
1.5. When the parent element of a child element uses a float layout, clear the floating CSS pseudo-element after and add zoom: 1; to solve the problem.
2. The line-height attribute is invalid. The line-height attribute value set in CSS is invalid in IE9. This problem is mostly caused by the font. You can set the font to Songti or Microsoft Yahei.
3. The overflow attribute is invalid in IE6 and 7. When the child element is relatively positioned, the parent element's overflow is set to hidden; it will be invalid. The solution is to set the parent element to relatively positioned as well.
4. After the sub-elements in the li element float, the li element will have a gap of several pixels upward (similar to padding-top) or downward (similar to margin-top). For example: the vertically arranged li elements will have a gap of several pixels downward.

Copy code

The code is as follows:

View Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Bugs caused by floating sub-elements in list li</title>
<style>
/*Global styles*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.5 Arial,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
ul { list-style: none; }
img { border: none; }
/* Clear floating style */
.clear-fix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; }
.clear-fix: { zoom: 1; }
body { background-color: #F00; }
.module { width: 200px; height: 300px; border: 1px solid #FFF; margin: 100px auto; }
.module ul { width: 100%; background-color: #093; }
.module li { width: 100%; background-color: #CCC; }
.module li span { float: left; display: inline; text-align: center; width: 50%; line-height: 60px; }
</style>
</head>
<body>
<div class="module">
<ul>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
<li class="clear-fix"> <span>span1</span><span>span2</span> </li>
</ul>
</div>
</body>
</html>

As shown in the figure: Displayed in IE6 and 7

3. Fixed container image vertically centered

Copy code

The code is as follows:

View Code
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>Demo of vertically centering an image</title>
</head>
<style>
/*Global styles*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.5 Arial,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
ul { list-style: none; }
img { border: none; }
/* Clear floating style */
.clear-fix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; }
.clear-fix: { zoom: 1; }
.box { width: 800px; margin: 100px auto; }
.pic-wrap {
width: 220px;
height: 220px;
border: 1px solid #F00;
/*Standard browser simulation table centering*/
display: table-cell;
vertical-align: middle;
text-align: center;
/*Prevent the container from expanding due to font and line height*/
font-size: 0;
line-height: 1;
*display: block;
+line-height: 220px;
_font-size: 192px; /* font size equals height/1.14 */
_font-family: sans-serif;
}
.pic-wrap img {
display: inline; /*The image must be an inline element*/
vertical-align: middle;
}
</style>
<body>
<div class="box">
<a href="" class="pic-wrap" target="_blank">
<img src="http://img01.taobaocdn.com/tps/i1/T1LZ.8XdVcXXcb7DQt-185-205.jpg" alt="Source xxx" title="Source xxx">
</a>
</div>
</body>
</html>

As shown in the figure: Three different sizes of pictures are displayed. Here, the picture does not exceed the size of the picture's parent element container (sometimes the developer can control the maximum size of the output data picture, and the picture will automatically scale proportionally)

<<: HTML form application includes the use of check boxes and radio buttons

>>: Pure CSS to display the √ sign in the lower right corner after selecting the product

How to install Docker on Windows 10 Home Edition

Sorting out some common problems encountered in CSS (Hack logo/fixed container/vertical centering of images)

How to install Docker on Windows 10 Home Edition

How to implement HTML Table blank cell completion

Detailed explanation of mysql basic operation statement commands

React.js framework Redux basic case detailed explanation

Introduction to the role of HTML doctype

Solution to the problem "/bin/sh: pip: command not found" during Dockerfile build

Linux disk sequential writing and random writing methods

JavaScript implements circular carousel

How to use HTML form with multiple examples

How to implement mysql database backup in golang

Recommend

How to use echarts to visualize components in Vue

CSS selects the first child element under the parent element (:first-child)

How to change the root password of Mysql5.7.10 on MAC

HTML table cross-row and cross-column operations (rowspan, colspan)

MySQL enables slow query (introduction to using EXPLAIN SQL statement)

Tools to convert static websites into RSS

Douban website's method for making small changes to website content

JavaScript implements page scrolling animation

Detailed explanation of JavaScript primitive data type Symbol

The popularity of Chinese domain names in China has ushered in a new round of climax

About Zabbix custom monitoring items and triggers

Detailed steps for using jib for docker deployment in Spring Cloud

Native JS to implement hover drop-down menu

Build Maven projects faster in Docker