Why the values of outerHeight (true) and safari under chorme are not the same

Code:
<!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;
            }
            
            -sharpwrp .datamore {
                position: relative;
                margin: 0 auto;
            }
            
            li {
                list-style: none;
                margin-right:10px;
                margin-bottom:10px;
            }
            
            -sharpwrp .datamore>li {
                width: 260px;
                border: 1px solid -sharpccc;
                padding: 10px;
                line-height: 0;
                position: absolute;
            }
            
            -sharpwrp .datamore>li img {
                width: 260px;
                display: block;
            }
            
            -sharpwrp .datamore>li h1 {
                line-height: 30px;
                font-size: 14px;
                border-bottom: 1px solid -sharpccc;
            }
            
            -sharpwrp .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>
                     .
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
                    <h1></h1>
                    
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
                    <h1></h1>
                    429"" 
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
                    <h1></h1>
                    Anthony Powell10
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
                    <h1>"" </h1>
                     .
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20185.jpg" alt="">
                    <h1>"" </h1>
                     .
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20186.jpg" alt="">
                    <h1></h1>
                    
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20187.jpg" alt="">
                    <h1></h1>
                    429"" 
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20188.jpg" alt="">
                    <h1></h1>
                    Anthony Powell10
                </li>
                <li>
                    <img src="http://7xr23p.com1.z0.glb.clouddn.com/20189.jpg" alt="">
                    <h1>"" </h1>
                     .
                </li>
            </ul>
            <div class="ficer"></div>
        </div>
        <script type="text/javascript">
            var owrap = $("-sharpwrp");
            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; iPP) {
                arr.push(oli.eq(i).outerHeight(true));
                oli.eq(i).css({
                    "top": 0,
                    "left": i * oliwidh + "px"
                })
            }
            console.log(arr);
        </script>
    </body>

</html>
browse online
the value of this arr array is not the same as outerHeight (true) and safari under chorme? Why. I don"t quite understand