简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Seltsames Verhalten mit „font-size:0px' – Stapelüberlauf
怪我咯
怪我咯 2017-05-19 10:18:44
0
2
736

Es gibt zwei Elemente img span in einem p.

1. Stellen Sie die Schriftgröße:0px

auf S. ein 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> relationship between height  and font-size </title>
    <style type="text/css">
        *{
            margin:0px;
            border:0px;
            box-sizing:border-box;
        }
        p{
            border:1px solid black;
            font-size:0px;
        }
        img{
            border:1px solid red; 
        }
        span{
            border:1px solid blue;             
        }
    </style>  
</head>
<body>
    <p>
        <img src="https://i.stack.imgur.com/abMWp.jpg" alt=""><span>it is a car</span>
    </p>
    <script language="JavaScript">
        var e1=document.getElementsByTagName("p")[0];
        var e2=document.getElementsByTagName("img")[0];
        alert("Target height is "+(e1.offsetHeight-e2.offsetHeight).toString());
    </script>
</body>
</html>

Speichern Sie es als car1.html und das laufende Ergebnis ist 0,

2. Legen Sie „font-size:0px

“ für die beiden untergeordneten Elemente von p fest 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> relationship between height  and font-size </title>
    <style type="text/css">
        *{
            margin:0px;
            border:0px;
            box-sizing:border-box;
        }
        p{
            border:1px solid black;
        }
        img{
            border:1px solid red; 
            font-size:0px;
        }
        span{
            border:1px solid blue;  
            font-size:0px;           
        }
    </style>  
</head>
<body>
    <p>
        <img src="https://i.stack.imgur.com/abMWp.jpg" alt=""><span>it is a car</span>
    </p>
    <script language="JavaScript">
        var e1=document.getElementsByTagName("p")[0];
        var e2=document.getElementsByTagName("img")[0];
        alert("Target height is "+(e1.offsetHeight-e2.offsetHeight).toString());
    </script>
</body>
</html>

Speichern Sie es als car2.html und das laufende Ergebnis ist 6px.
Wie lässt sich dieses Verhalten erklären?

怪我咯
怪我咯

走同样的路，发现不同的人生

Antworte allen(2)
巴扎黑
巴扎黑2017-05-19 10:20:44 2 Etage

这是font-size对img标签的影响。外层包围img元素的p font-size越大，底部留白也就越大。span作为一个行内元素，高度没有img高，可以忽略。e1和e2之间相差的高度就是img和p之间的留白。（当然你要border注释掉，p font-size:0时才能得到e1-e2等于0）。

Wie +0
Antwort hinzufügen
淡淡烟草味
淡淡烟草味2017-05-19 10:20:44 1 Etage

指出一点：情况1应该为2

三个点：
1.p的高度是由line-height撑起。
2.默认情况下，line-height为normal(1.1-1.2由浏览器决定)，又是由font-size决定
3.offsetHeight还包括border

所以，我们再来看：
情况1：在父元素p设置font-size:0;此时，span继承font-size:0,但border上下和2px，所以，p的offsetHeight=内容高度+border,内容高度=img的offsetHeight+span的2px，所以e1.offsetHeight-e2.offsetHeight=2才对
情况2：在子元素上分别设置font-size:0;img和span的情况和上述一样，但是p的font-size默认为16px;line-height值由浏览器决定，所以它的内容高度改变了，最后的值由浏览器决定。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！