解决三像素问题的总结:
1.img 标签的父标签增加 font-size:0;
如, body{font-size: 0;}
2.img 标签增加 display:block;
- img{
- display:block;
- }
3.img 标签增加 vertical-align: middle;
- img{
- vertical-align: middle;// 或者 vertical-align:top;
- }
4.img 标签增加 float:left
- img{
- float:left;
- }
为了更好地看效果, 读者可以通过运行代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title > 三像素问题 </title>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- #box{
- width: 500px;
- margin: 0 auto;
- }
- /* 解决三像素问题 */
- /*// 方法一
- body{
- font-size: 0;
- }*/
- /*// 二
- img{
- display:block;
- }*/
- /*// 方法三
- img{
- //vertical-align: top;//vertical-align: top|middle; 都可以
- vertical-align: middle;
- }*/
- // 方法四
- img{
- /*float: left;*/
- display: block;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
- <img width="300" height="300" src="http://p2.so.qhmsg.com/bdr/200_200_/t0170482b9930a35857.jpg" alt="加载" title="">
- </div>
- </body>
- </html>
来源: https://www.cnblogs.com/lvxisha/p/9658287.html