简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Tingkah laku pelik dengan font-size:0px - Stack Overflow
怪我咯
怪我咯 2017-05-19 10:18:44
0
2
738

Terdapat dua elemen img span dalam p.

1. Tetapkan saiz fon:0px

pada p 
<!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>

Simpan sebagai car1.html, dan hasil larian ialah 0.

2. Tetapkan saiz fon:0px

pada dua elemen anak p 
<!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>

Simpan sebagai car2.html, dan hasil larian ialah 6px.
Bagaimana untuk menerangkan tingkah laku ini?

怪我咯
怪我咯

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

membalas semua(2)
巴扎黑
巴扎黑2017-05-19 10:20:44 Tingkat 2

Ini ialah kesan saiz fon pada teg img. Semakin besar saiz fon p lapisan luar yang mengelilingi elemen img, semakin besar margin bawahnya. Sebagai elemen sebaris, span tidak setinggi img dan boleh diabaikan. Perbezaan ketinggian antara e1 dan e2 ialah ruang antara img dan p. (Sudah tentu anda perlu mengulas keluar sempadan, dan hanya apabila p font-size:0 anda boleh mendapatkan e1-e2 sama dengan 0).

Suka +0
Tambah Balasan
淡淡烟草味
淡淡烟草味2017-05-19 10:20:44 Tingkat 1

Tegaskan satu perkara: kes 1 hendaklah 2

Tiga mata: Ketinggian
1.p disokong oleh line-height. 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-height2. Secara lalai, ketinggian baris ialah biasa (1.1-1.2 ditentukan oleh penyemak imbas), yang ditentukan oleh saiz fon

3.offsetHeight juga termasuk sempadan🎜 🎜Jadi, mari kita lihat: 🎜Kes 1: Tetapkan font-size:0 dalam elemen induk p pada masa ini, span diwarisi font-size:0, tetapi sempadan atas dan bawah ialah 2px, jadi p's offsetHeight=tinggi kandungan + sempadan, ketinggian kandungan=img's offsetHeight+span's 2px, jadi e1. offsetHeight-e2.offsetHeight= 2 adalah betul🎜Kes 2: Tetapan font-size:0; img dan span pada anak elemen masing-masing dan Sama seperti di atas, tetapi font-s p lalai kepada 16px line-height nilai ditentukan oleh penyemak imbas Jadi ketinggian kandungannya berubah dan nilai akhir ditentukan oleh penyemak imbas. 🎜
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！