解决CSS图片底部3像素问题总结
2018-09-16 23:48
525 查看
解决三像素问题的总结:
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>
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>
相关文章推荐
- div里嵌套了img底部会有白块问题和图片一像素问题解决
- 关于HttpModule中像图片,*.css,*.js等资源文件也被请求问题的解决
- CSS解决文字环绕图片问题
- IE6下CSS图片缓存问题解决方法
- wordpress解决主题中路径的问题(图片,css)
- css使图片自动适应div的宽度变化---解决最大宽度问题
- 根据JS来自动缩放图片过大的问题(css没有解决IE6)
- 解决图片太大溢出问题、使用CSS限制图片最大宽度或使图片按比例自动缩放
- 使用css固定底部footer(解决内容不充实底部上移问题)
- 给图片添加水印,解决GIF添加水印的问题(无法从带有索引像素格式的图像创建 Graphics 对象)
- [Filter过滤器]解决缓存网站图片,css,js等问题
- 解决IE6下的CSS Hover背景图片闪烁问题
- ireport+struts2集成开发总结一: 解决HTML图片背景不能显示的问题
- CSS解决IE6下PNG图片背景不透明的问题
- IE6下CSS图片缓存问题解决方法
- 【IE6.0 Bug总结之八】图片底部空隙问题
- table不能换行问题解决,CSS之自动换行总结
- div+css在各浏览器间的兼容性问题解决方法总结
- CSS图片路径问题总结 [转]
- DIV+CSS解决图片文字对齐的问题