javascript - 无法在 phantomjs 中获取 span 元素的左上角坐标，但在浏览器中它可以工作

Question

我有一个简单的 phantomjs 脚本，它给出了页面上其中一个跨度的左上角坐标的错误结果。起初我以为这是因为 span 是内联元素，但我知道 jQuery 能够在实时浏览页面时获得正确的坐标，但是从 phantomjs 运行时它会失败。是 phantomjs 的问题吗？是否可以解决？

这是脚本

    var page = require('webpage').create();
    page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
    page.viewportSize = { width: 1200, height: 800 };

    page.open('http://metalnoir.com/process/', function (status) {
        if (status !== 'success') {
            phantom.exit();
        }
        page.onConsoleMessage = function (msg) { console.log(msg); };

        page.evaluate(function() {
//this one works
            var jhdr = jQuery('body>div#main-container>div#content-container>div#full-width>div#portfolio-preview-container>div:nth-of-type(2)>div#portfolio-wrapper>div:nth-of-type(1)>div:nth-of-type(4)>h6');
            var hdr = jhdr.get(0);
            console.log(hdr.outerHTML);
            console.log(jhdr.offset().top + ' ' + jhdr.offset().left + ' ' + jhdr.width() + ' ' + jhdr.height());
            var hdrrect = hdr.getBoundingClientRect();
            console.log(hdrrect.top + ' ' + hdrrect.left + ' ' + hdrrect.bottom + ' ' + hdrrect.right);
//this one doesn't
            var jspn = jQuery('body>div#main-container>div#content-container>div#full-width>div#portfolio-preview-container>div:nth-of-type(2)>div#portfolio-wrapper>div:nth-of-type(1)>div:nth-of-type(4)>span');
            var spn = jspn.get(0);
            console.log(spn.outerHTML);
            console.log(jspn.offset().top + ' ' + jspn.offset().left + ' ' + jspn.width() + ' ' + jspn.height());
            var spnrect = spn.getBoundingClientRect();
            console.log(spnrect.top + ' ' + spnrect.left + ' ' + spnrect.bottom + ' ' + spnrect.right);
        });                                     
        phantom.exit();
    });

这是示例脚本输出

<h6>Polishing</h6> off 85 10
461.59375 215.59375 121 21
461.59375 215.59375 482.59375 336.296875
<span class="post-info">Process</span> off 0 0
0 0 50 0
0 0 0 0

虽然 h6 可以使用坐标(只是为了说明脚本的工作原理)，但 span 有零。在浏览器中，跨度有 377、345、121、17(当然取决于 View 大小)。但肯定不是零。

Answer 1

问题解决了。简而言之，浏览器和 phantomjs 似乎对格式错误的 css 进行了不同的解释。当浏览器(我试过 Chrome 和 IE)停止以格式错误的样式处理 css 时，phantomjs 继续。

现在详情:

我将文件保存在本地并开始一个一个地删除指向 css 文件的链接。删除一个 css 文件后，跨度突然出现。文件有格式错误的媒体指令

@media only screen and (max-device-width:800px {
#logo-container a img {max-height:52px !important;}
}

之后它有隐藏有问题的跨度的规则

.post-info {
display: none !important;
}

因此，我假设浏览器在格式错误的规则后停止并且 phantomjs 继续并应用“无”规则。这就是为什么我没有在 phantomjs 渲染的屏幕截图上看到跨度并且无法获得正确的坐标。

在那之后，解决方法很简单——覆盖显示样式

if (jspn.hasClass('post-info')) jspn.attr('style', 'display: inline !important;');

最终输出

<h6>Polishing</h6> off 85 10
461.59375 415.59375 121 21
461.59375 415.59375 482.59375 536.296875
<span class="post-info" style="display: inline !important;">Process</span> off 85 31
482.59375 415.59375 121 17
482.59375 415.59375 499.59375 536.296875