zoukankan      html  css  js  c++  java
  • 图片三像素问题如何解决css

    一、提出问题

    在浏览器中,图片有一个下间隙问题,有人也称之为图片3像素BUG
    1.这并不是什么浏览器bug,而只是英文字母书写时有个基线的问题,基线决定了图片的对其方式。这才是造成浏览器中图片下间隙的本质。
    
    那么,什么是基线?
    我们小时候学英文,
    一开始都是用的四线本写英文字母,就是那个长的跟五线谱一样的本,4条线。其中第3条线就是基线,此线是绝大多数比较矮的字母的脚部对齐的线。
    比如a、z、x,这些短小一点的字母,它们的是以第3条线作为字母底部的对齐线的。
    但有的字母比较“高大”,比如g,y,它们的尾巴就会伸到第4条线上。
    同理,在网页上显示字符,也有一个基线存在,并且这个基线也是以英文4线普的对齐理论来对齐的
    
    2.这个下间隙也并不是固定的3像素,而是变化的。 
    知道了基线的概念,我们就知道了,像“g”这样比较高的字母,它探出基线之下的内容占多少像素,其实是跟当前元素设置的字号大小有关的。
    
    而图片在网页中默认的展示样式是inline-block的,所以它的对齐方式就跟文本一样,要跟基线对齐,这样就产生了图片与容器的下间隙。
    由于浏览器默认文字的字号是14px(有的是默认16px),所以就造成了默认的3像素的下间隙。
    但其实我们已经知道了,如果当前容器设置的字号远远大于16px,那么这个下间隙将大于3像素。
        
    

    二、解决办法

    去除图片下间隙的办法有很多,常用的有3种
    (1)设置父盒子字号为0  比如:
    .box{
       font-size: 0;  
    }
    
    
    (2)改变图片的display  
    .box img{
       display: block;  
    }
    
    
    (3)给图片设置垂直对齐方式
    .box img{
       virtical-align: middle;//设置为任意值都可以  
    }
    

    来源:https://www.cnblogs.com/ldq678/category/1324993.html

    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    NX二次开发-获得制图中对象的坐标点UF_DRF_ask_origin
    string的find("")
    NX二次开发-设置尺寸的附加尺寸UF_DRF_set_appended_text
    NX二次开发-获取尺寸的附加文本UF_DRF_ask_appended_text
    NX二次开发-更改图纸尺寸内容(编辑文本)uc5566
    NX二次开发-获取工程图尺寸的值UF_DRF_ask_dim_info
    MFC进度条
    NX二次开发-对话框解锁UF_UI_unlock_ug_access
    NX二次开发-对话框加锁UF_UI_lock_ug_access
    <转载>深入 理解char * ,char ** ,char a[ ] ,char *a[] 的区别
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/14334347.html
Copyright © 2011-2022 走看看