html - 仅在 Android 版 Chrome 中呈现的幻影元素—

html - 仅在 Android 版 Chrome 中呈现的幻影元素——在检查时消失

转载作者：行者123 更新时间：2023-11-28 03:22:54

在这个问题上把我的头发拉出来，我很感激我能得到的任何帮助。

使用 Android 版 Chrome 访问此网站:http://summit2014.cochranesupply.com/

根据我的经验，这个问题是 Android 版 Chrome 独有的，我认为这可能是一个错误，但我需要一个解决方法。

向下滚动到“联系人”部分并在其中翻找。您应该至少找到一个这种实心颜色条的实例:

Example

我对这个酒吧的了解:

它呈现在“联系人”内容 block 后面
- 我相信这是真的，因为如果我使用透明图像 (.png) 而不是 rgba(255,255,255,0.9) 作为背景，我仍然可以看到它，但是如果我将相同的图像设为不透明，我就看不到它.
背景颜色为不透明度约为 10% 的白色
- 我测试了这是否与我的 rgba(255,255,255,0.9) 部分背景色有关，但事实并非如此。将部分背景更改为红色或纯色不会更改幻影元素的颜色/色调。
如果我连接桌面版 Chrome 调试工具，在我点击“检查”的那一秒，我的 Android 设备及其模拟 View 中的幻影条就会消失。
如果我将手机横向翻转以呈现内容，然后将其翻转回来，幻影条就会消失。
我删除了所有 CSS 表格格式，但没有用。我已经删除了与该内容 block 关联的所有 css 组合，但无济于事。唯一让它消失的方法是完全从部分中删除背景，或者使用可能隐藏这些幻影 block 的不透明背景。
我已删除页面底部的所有自定义脚本，但无济于事。
我已删除围绕此内容 block 的各种内容，但均无济于事。
不同的内容组合会使条形图呈现在不同的位置。有时，当切换回原始配置时，即使所有代码都已恢复正常，条形图的呈现方式也会与之前不同。

我不知道该怎么办了。我希望 Chrome 调试能够成功，并且我能够确定这里到底呈现了什么，但我不能，因为一旦我使用检查功能查看 CSS/HTML，幻影元素就会立即消失。

这也是该内容 block 的相关 CSS/HTML:

HTML:

        <div class="row section">
            <div class="slot-6-7-8-9">
                <div class="section-title">
                    <i class="fa fa-users"></i>CONTACT
                </div>
            </div>
            <div class="slot-6-7-8-9">
                <div class="section-text" style="text-align: center;">
                    General inquiries and sales:<br>
                    <span class="semibold" style="font-size: 1.1em">800-482-4894</span><br>
                    <a href="mailto:sales@cochranesupply.com">sales@cochranesupply.com</a><br>
                    <a class="semibold" href="http://www.cochranesupply.com">www.cochranesupply.com</a><br>
                    <a href="http://twitter.com/CochraneSupply" target="_blank" class="social-media"><i class="fa fa-twitter-square" style="color: #00aced;"></i></a>
                    <a href="https://www.facebook.com/pages/Cochrane-Supply-Engineering/148656168524834" target="_blank" class="social-media"><i class="fa fa-facebook-square" style="color: #3b5998;"></i></a>
                    <a href="http://www.linkedin.com/groups?about=&gid=2878019&trk=anet_ug_grppro" target="_blank" class="social-media"><i class="fa fa-linkedin-square" style="color: #007bb6;"></i></a>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/scochrane.jpg" alt="Scott Cochrane">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Scott Cochrane
                            </div>
                            <div class="contact-title-text">
                                President
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:scochrane@cochranesupply.com">scochrane</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/dladwig.jpg" alt="Dave Ladwig">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Dave Ladwig
                            </div>
                            <div class="contact-title-text">
                                General Manager
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:dladwig@cochranesupply.com">dladwig</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/nconklin.jpg" alt="Nicole Conklin">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Nicole Conklin
                            </div>
                            <div class="contact-title-text">
                                OEM Sales
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:nconklin@cochranesupply.com">nconklin</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/ptrainor.jpg" alt="Pat Trainor">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Pat Trainor
                            </div>
                            <div class="contact-title-text">
                                OEM Sales
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:ptrainor@cochranesupply.com">ptrainor</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/mrosu.jpg" alt="Mike Rosu">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Mike Rosu
                            </div>
                            <div class="contact-title-text">
                                Northeast Detroit, MI
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                313-387-3025
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:mrosu@cochranesupply.com">mrosu</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/dlawson.jpg" alt="Dave Lawson">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Dave Lawson
                            </div>
                            <div class="contact-title-text">
                                Southwest Detroit, MI
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                313-387-3025
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:dlawson@cochranesupply.com">dlawson</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/drademacher.jpg" alt="Dan Rademacher">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Dan Rademacher
                            </div>
                            <div class="contact-title-text">
                                Western Michigan
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-306-5104
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:drademacher@cochranesupply.com">drademacher</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/gwidenmier.jpg" alt="Greg Widenmier">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Greg Widenmier
                            </div>
                            <div class="contact-title-text">
                                Northern Michigan
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                989-859-6062
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:gwidenmier@cochranesupply.com">gwidenmier</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/thorace.jpg" alt="Tim Horace">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Tim Horace
                            </div>
                            <div class="contact-title-text">
                                Ohio
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                419-243-1711
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:thorace@cochranesupply.com">thorace</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/gwitt.jpg" alt="Greg Witt">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Greg Witt
                            </div>
                            <div class="contact-title-text">
                                Kentucky
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                502-208-3640
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:gwitt@cochranesupply.com">gwitt</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/plemire.jpg" alt="Patrick Lemire">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Patrick Lemire
                            </div>
                            <div class="contact-title-text">
                                Canada
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                514-609-7114
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:plemire@cochranesupply.com">plemire</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/nrichmond.jpg" alt="Nicole Richmond">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Nicole Richmond
                            </div>
                            <div class="contact-title-text">
                                Marketing, Training Coordinator
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:nrichmond@cochranesupply.com">nrichmond</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/mmitchell.jpg" alt="Mike Mitchell">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Mike Mitchell
                            </div>
                            <div class="contact-title-text">
                                Chief Technology Officer
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:mmitchell@cochranesupply.com">mmitchell</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/jmitchell.jpg" alt="Joe Mitchell">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Joe Mitchell
                            </div>
                            <div class="contact-title-text">
                                Tech Services, Instructor
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:jmitchell@cochranesupply.com">jmitchell</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/kcrabill.jpg" alt="Kevin Crabill">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Kevin Crabill
                            </div>
                            <div class="contact-title-text">
                                Tech Services, Developer
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:kcrabill@cochranesupply.com">kcrabill</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slot-8-9">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/rvandermeer.jpg" alt="Ron Vandermeer">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Ron Vandermeer
                            </div>
                            <div class="contact-title-text">
                                Tech Services, Instructor
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:rvandermeer@cochranesupply.com">rvandermeer</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="slot-6-7">
                    <div class="contact-container">
                        <div class="contact-picture">
                            <img src="./images/employees/arickle.jpg" alt="Aaron Rickle">
                        </div>
                        <div class="contact-info">
                            <div class="contact-title-bold">
                                Aaron Rickle
                            </div>
                            <div class="contact-title-text">
                                Tech Services, Developer
                            </div>
                            <div class="contact-bold">
                                Phone
                            </div>
                            <div class="contact-text">
                                800-482-4894
                            </div>
                            <div class="contact-bold">
                                Email
                            </div>
                            <div class="contact-text">
                                <a href="mailto:arickle@cochranesupply.com">arickle</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS:

.section {
    background-color: rgba(255,255,255,0.9);
    margin-top: 10px;
}

.contact-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 20px 0;
}

.contact-picture {
    display: table-cell;
    vertical-align: top;
    width: 25%;
    padding: 1px 14px 0 14px;
}

.contact-picture img {
    width: 100%;
}

.contact-info {
    display: table-cell;
    vertical-align: top;
    line-height: 100%;
}

.contact-title-bold {
    font-size: 20px;
    color: #d92027;
    font-weight: 600;
}

.contact-title-text {
    font-size: 16px;
    color: #d92027;
    margin-top: 5px;
}

.contact-bold {
    margin-top: 10px;
    color: #505050;
}

.contact-text {
    margin-top: 3px;
    font-size: 18px;
}

请帮助@_@ 目前我几乎已经放弃并认为它是 Chrome for Android 的一个错误，但我很想找出某种解决方法，理解为什么会发生这种情况，或者真的确定这是一个错误。

最佳答案

我花了一些时间研究这个问题，以下是我的发现:

幻影栏在我第一次加载您的页面时出现，而不仅仅是在联系人 block 中。
当我刷新浏览器时，条形图完全消失了。当我再次刷新时，他们回来了，只在联系人 block 中。
当我将设备翻转到横向时，幻影条再次消失，并且在我向后翻转时没有返回。

幻影栏显示不一致的事实表明 Chrome for Android 存在错误。

我知道这不能回答您的问题，但希望它能为您提供更多信息。

关于html - 仅在 Android 版 Chrome 中呈现的幻影元素——在检查时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23250737/

文章推荐： javascript - CSS渐变无法刷新

文章推荐： jquery - 如何为不同的屏幕正确对齐卡片？

文章推荐：响应移动设备时不显示 css 文本

windows - Windows 版 Safari 和 Mac 版 Safari 之间的区别
从开发者的角度来看，Mac 版 Safari 和 Windows 版 Safari 有何不同？我认为可以归结为评估两者之间的差异(如果我遗漏了什么，请更正): - 布局渲染 - Javascript
android - iOS 版 Chrome 和 Android 版 Chrome 之间的区别
正如标题所说:Android 版 Chrome 和 iOS 版 Chrome 有什么区别。我对两者进行了一些研究，但找不到关于该主题的任何最新信息。进行这项研究的原因是因为我正在研究某些 Web A
javascript - 地理定位在 Android 版 Chrome 和 Android 版 Firefox 中不起作用
我有以下脚本可以获取您的地理位置并重定向您到 Google map : (function(){ navigator.geolocation.getCurrentPosition(function(p
css - 为什么 Mac 版 Chrome 与 PC 版 Chrome 存在利润差异？
我负责修复导航栏显示比应有的低 1 像素的问题。查看网站后，我无法找到所报告的问题，直到我在 Mac 上进行了检查。 Firefox、Safari 等在 Mac 上运行良好，但 Chrome 是导致
node.js - Windows 版 Node.js 和 Mac OS 版 Node.js 之间的主要区别？
我是典型的 .NET 开发人员(C# 是我的第一语言)，几年前转向 ASP.NET MVC。现在是我职业生涯发生重大变化的新时期。如果我们看看 Web 开发的前景，我们可以看到新技术如何占领世界，而其
grails 2.0 - 安装资源插件提供 1.1.3 版，而不是 1.1.6 版 [ ** 不要使用 install-plugin **]
Grails 2.0 项目目前带有资源插件 1.1.5，它似乎有几个依赖问题(例如，参见 this post 的答案)。我正在使用 IntelliJ，虽然我将 BuildConfig.groovy 更
安卓 Activity 版
我有一个支持 android 2.3.3 的 android 项目。但它也支持 sdk 版本 17。当我创建一个新 Activity 时，它会创建一个特定于版本 17 的 Activity 。如何
java - Android 版
有没有人有在 Android 设备上使用 pjsip 的经验？我看到几个非商业/测试项目使用它，所以我假设它可以完成，但没有一个有很好的记录。我认为 pjsip-jni 项目是一个不错的起点，但基本上
iOS 版 Fragments
谁能告诉我在 Xcode (iPhone) 中执行以下操作的最佳方法是什么。我有一个主导航屏幕，上面有一些按钮。当用户单击任何按钮时，他们将被带到带有更多选项按钮的子导航屏幕。在这里，他们单击任意一
java - hibernate 版？
我正在使用 JBoss Embedded beta3.SP10 版本，我正面临一个应该在某些 Hibernate 版本中修复的持久性错误。可悲的是，我不知道我的 JBoss Embedded 中使用的
android - Android 版
我想在 android 中使用简单的 snmp get。我找到了 java 的代码并尝试在 android 中使用它。我还附加了 snmp4j.jar 文件用于 android。但是我得到了 Null
MongoDB实现基于关键词的文章检索功能(C#版)
我的实现目标是：可以通过一个或多个关键词搜索到文章。可以通过文章的关键词列表查询到其相关文章。查询到的结果依据相关程度降序排列。查询速度要够快。（理论上关键词检索比全文检索要快很多的
iphone - iPhone 版 FFMpeg
我正在尝试创建一个允许我将视频从 iPhone 流式传输到服务器的应用程序。我目前关于如何做到这一点的理论是创建一系列 FFMpeg 文件并将它们发送到服务器。据我所知，我已经编译了 FFMpeg图书
Windows 版 GitHub 无法登录
这个问题在这里已经有了答案: Login failed in github for window (5 个回答) 7年前关闭。当我安装 GitHub 时，我无法使用我的帐户凭据登录。我收到错误 L
iphone - iPad 版 Three20
我需要在我的 iPad 项目中使用 Three20。我想知道 iPhone 版本的 Three20 项目是否可以直接在 iPad 上使用，还是应该等待这个时间线完成: http://three20.i
iphone - iPhone 版 Soundtouch
有人能做到吗 http://www.surina.net/soundtouch/适用于 iPhone？简单的 Xcode 演示会很有帮助。我只想通过一些音调操作来播放音效。谢谢克里斯最佳答案使
iphone - iPhone 版 Speex
如何在iPhone中使用“speex”进行音频编码/解码？我没有在项目中添加框架。最佳答案这个blog entry: Compile Speex For iPhone克利夫顿·克雷格(Clifto
iphone - 你好 iPhone 版
我想知道bonjour是公共(public)API还是私有(private)API？我们可以直接在我们的应用程序中使用它吗？最佳答案 Bonjour 由 NSNetServices 和 CFNetS
android - 为什么我的应用程序即使已完全发布也显示为 Beta 版？
••••• 已解决•••••该应用程序可用。只是花了一些时间才出现。我之所以将其视为测试版，是因为我的 Google 帐户用于 alpha 测试。如果您遇到同样的问题，只需从测试人员中删除您的帐户并等
java - 下载 Android 版
我是 Android 编程初学者。我在使用 Android 下载文件时遇到问题我使用了 Httpost、Httpget 和 hhtpurlconnection前两个根本不起作用第三个两次无法下载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 仅在 Android 版 Chrome 中呈现的幻影元素——在检查时消失