鍍金池/ 問(wèn)答/HTML/ 為什么chorme下的outerHeight(true)和safari的數(shù)值不一

為什么chorme下的outerHeight(true)和safari的數(shù)值不一樣

代碼：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            html,
            body,
            ul,
            li,
            p,
            h1 {
                margin: 0;
                padding: 0;
            }
            
            body {
                margin-top: 10px;
                min-width:1000px;
            }
            
            #wrp .datamore {
                position: relative;
                margin: 0 auto;
            }
            
            li {
                list-style: none;
                margin-right:10px;
                margin-bottom:10px;
            }
            
            #wrp .datamore>li {
                width: 260px;
                border: 1px solid #ccc;
                padding: 10px;
                line-height: 0;
                position: absolute;
            }
            
            #wrp .datamore>li img {
                width: 260px;
                display: block;
            }
            
            #wrp .datamore>li h1 {
                line-height: 30px;
                font-size: 14px;
                border-bottom: 1px solid #ccc;
            }
            
            #wrp .datamore>li p {
                font-size: 12px;
                line-height: 20px;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="wrp">
            <ul class="datamore">
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20185.jpg" alt="">
                    <h1>草間彌生“花癡屋”亮相</h1>
                    <p>在維多利亞國(guó)家美術(shù)館三年展的展廳中， 觀眾蜂擁而至，試圖一睹大師的幻覺(jué).</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
                    <h1>日本洞穴巧借光影玩浪漫</h1>
                    <p>日本千葉縣有個(gè)神奇的洞穴，它會(huì)巧借光影玩浪漫，每年為人們奉上兩次驚艷的表演。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
                    <h1>美公司成功試飛軌道飛行器</h1>
                    <p>當(dāng)?shù)貢r(shí)間4月29日，美國(guó)得克薩斯州范霍恩附近，美國(guó)藍(lán)色起源公司再次成功試飛并回收升級(jí)版“新謝潑德”亞軌道飛行器。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
                    <h1>南極洲企鵝發(fā)現(xiàn)被偷拍</h1>
                    <p>來(lái)自新西蘭的電影制作人Anthony Powell已經(jīng)連續(xù)10年在南極洲記錄企鵝的生活特性，希望揭開(kāi)這群可愛(ài)的極地動(dòng)物神秘的面紗。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
                    <h1>草間彌生“花癡屋”亮相</h1>
                    <p>在維多利亞國(guó)家美術(shù)館三年展的展廳中， 觀眾蜂擁而至，試圖一睹大師的幻覺(jué).</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20185.jpg" alt="">
                    <h1>草間彌生“花癡屋”亮相</h1>
                    <p>在維多利亞國(guó)家美術(shù)館三年展的展廳中， 觀眾蜂擁而至，試圖一睹大師的幻覺(jué).</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
                    <h1>日本洞穴巧借光影玩浪漫</h1>
                    <p>日本千葉縣有個(gè)神奇的洞穴，它會(huì)巧借光影玩浪漫，每年為人們奉上兩次驚艷的表演。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
                    <h1>美公司成功試飛軌道飛行器</h1>
                    <p>當(dāng)?shù)貢r(shí)間4月29日，美國(guó)得克薩斯州范霍恩附近，美國(guó)藍(lán)色起源公司再次成功試飛并回收升級(jí)版“新謝潑德”亞軌道飛行器。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
                    <h1>南極洲企鵝發(fā)現(xiàn)被偷拍</h1>
                    <p>來(lái)自新西蘭的電影制作人Anthony Powell已經(jīng)連續(xù)10年在南極洲記錄企鵝的生活特性，希望揭開(kāi)這群可愛(ài)的極地動(dòng)物神秘的面紗。</p>
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
                    <h1>草間彌生“花癡屋”亮相</h1>
                    <p>在維多利亞國(guó)家美術(shù)館三年展的展廳中， 觀眾蜂擁而至，試圖一睹大師的幻覺(jué).</p>
                </li>
            </ul>
            <div class="ficer">我是看不見(jiàn)的</div>
        </div>
        <script type="text/javascript">
            var owrap = $('#wrp');
            var datamore = $('.datamore');
            var oli = owrap.find('li');
            var arr = [];
            var owidth = $(window).width();
            var oliwidh = oli.eq(0).outerWidth(true);
            var len = Math.floor((owidth / oliwidh));
            var omin;
            var objinx;
            datamore.css({
                'width': oliwidh * len
            })
            for(var i = 0; i < len; i++) {
                arr.push(oli.eq(i).outerHeight(true));
                oli.eq(i).css({
                    'top': 0,
                    'left': i * oliwidh + 'px'
                })
            }
            console.log(arr);
        </script>
    </body>

</html>

在線瀏覽

這個(gè)arr數(shù)組的數(shù)值在chorme下的outerHeight(true)和safari不一樣？為什么。想不太明白

回答
編輯回答
焚音

對(duì)于字體，各家瀏覽器渲染方式不一樣，高度不一致很正常

2018年7月17日 04:04