草庐IT

android - 伪元素 :after disapears on chrome mobile

coder 2024-01-18 原文

我有一个包含导航元素的页面，我想将其隐藏在页面的左侧/右侧，并在我将鼠标悬停在图标上时显示。我在要隐藏的元素上使用 :after 伪元素创建了图标。该解决方案在经过测试的桌面浏览器上运行良好，但在 chrome 移动版上运行失败(即使桌面版本运行良好)。

我在 iOS 和 Android 上测试过，没有一个能够显示 :after 伪元素。 但是 如果您碰巧点击了:after 应该位于的位置，菜单就会显示出来。所以看起来这只是一个显示问题。

我创建了 this jsfiddle显示问题。我添加了一些 javascript 只是因为它在真实页面上，但我认为这不是问题的原因。

更奇怪的是，在 iOS 上，chrome 和 safari 都可以在 jsfiddle 上显示 M 和 S，但在真实页面上无法显示图标。不过，Android 版 Chrome 也无法在 jsfiddle 上显示元素。

那么，我的问题是，如何在 Chrome 移动版或 iOS 浏览器上显示 :after 伪元素？

body, html {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: white;
}

h1 {
  text-align: center;
}

footer {
  padding: 10px;
}

section {
  background: white;
  margin: 350px 0px 0px;
  padding: 10px 10% 25px;
  box-shadow: 0px 10px 20px rgba(120, 120, 120, 0.19), 0px -10px 10px rgba(150, 150, 150, 0.23);
  overflow: hidden;
  text-align: justify;
}

header div {
  position: fixed;
  text-align: center;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

header nav {
  display: block;
  position: fixed;
  width: 60%;
  top: 0px;
  bottom: 0px;
  right: 100%;
  background: #BBBBBB;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 3;
  overflow-y: auto;
}

header nav:hover {
  right: 40%;
  box-shadow: 15px 0px 20px rgba(100, 100, 100, 0.3);
}

header nav:after {
  display: block;
  position: fixed;
  padding: 15px;
  content: "M";
  top: 0px;
  left: 0px;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 4 !important;
}

header nav:hover:after {
  visibility: hidden;
  content: "x";
}

header aside {
  display: block;
  position: fixed;
  width: 60%;
  top: 0px;
  bottom: 0px;
  left: 100%;
  background: #BBBBBB;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 3;
  overflow-y: auto;
}

header aside:hover {
  left: 40%;
  box-shadow: -15px 0px 20px rgba(100, 100, 100, 0.3);
}

header aside:after {
  display: block;
  position: fixed;
  padding: 15px;
  content: "S";
  top: 0px;
  right: 0px;
  color: #324353;
  transition: all 0.8s ease-in-out;
  z-index: 4 !important;
}

header aside:hover:after {
  visibility: hidden;
  content: "x";
}
<header>
  <div>
    <h1>
    Some Title
    </h1>
  </div>
  <nav>
    Some Menu
  </nav>
  <aside>
    Some Settings
  </aside>
</header>

<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id faucibus sem. Nullam venenatis arcu massa, sit amet sodales dui dapibus sit amet. Nunc est elit, feugiat a molestie a, eleifend vitae diam. Sed eleifend eros vel nunc cursus gravida. Nulla magna dolor, finibus non dolor a, auctor porta diam. Proin a justo ultrices, semper dolor sit amet, maximus leo. Proin vehicula tincidunt tortor, gravida pellentesque risus sollicitudin vel. Cras lacinia luctus tellus in consectetur. Morbi facilisis nec justo ut condimentum. In semper vestibulum libero, non vestibulum lacus efficitur sed. Proin laoreet convallis tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec porta ligula odio, quis hendrerit nisl accumsan ac. Mauris aliquam cursus ultricies. Curabitur luctus, mi auctor bibendum interdum, mi arcu luctus lorem, at ornare nunc felis et lorem. Maecenas ut hendrerit arcu.
</section>
<footer>Some footer text</footer>

最佳答案

不确定移动浏览器发生了什么，但删除了 overflow-y: auto;来自 header nav和 header aside似乎在工作。

但是，如果您确实需要滚动条，您可以将另一个元素(即 <ul> )添加到 <nav> 中.

header nav ul {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  padding: 0;
  margin: 0;
  overflow-y: auto;
}

参见 updated jsFiddle .

关于android - 伪元素 :after disapears on chrome mobile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35105527/

disapearsandroidcodesectionheaderhtmlioscssgoogle-chrome

有关android - 伪元素 :after disapears on chrome mobile的更多相关文章

  1. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  2. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  3. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  4. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  5. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  6. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

  7. ruby - 使用 Nokogiri 和 Ruby 命名元素 "text" - 2

    我在尝试使用Nokogiri构建XML文档时遇到了一个小问题。我想将我的元素之一称为“文本”(请参阅​​下面粘贴代码的最底部)。通常，要创建一个新元素，我会执行类似以下的操作xml.text--但它似乎是.text是Nokogiri已经用来做其他事情的方法。因此，当我写这行时xml.textNokogiri没有创建名为的新元素但只是写了意味着成为元素内容的文本。我怎样才能让Nokogiri实际制作一个名为的元素？？builder=Nokogiri::XML::Builder.newdo|xml|xml.TEI("xmlns"=>"http://www.tei-c.org/ns/1.0"

  8. ruby - 在 factory_girl 中有没有办法获取 attributes_for 并为同一个实例元素创建？ - 2

    如果我想使用“create”构建策略创建和实例，然后想使用“attributes_for”构建策略进行验证，是否可以这样做？如果我在工厂中使用序列？在Machinistgem中有可能吗？ 最佳答案 不太确定我是否完全理解。而且我不是机械师的用户。但听起来您只是想做这样的事情。@attributes=FactoryGirl.attributes_for(:my_object)my_object=MyObject.create(@attributes)my_object.some_property.should==@attributes

  9. ruby - 数组数组中的唯一元素 - 2

    我想通过内部数组中的第一个元素从数组数组中找到唯一元素。例如a=[[1,2],[2,3],[1,5]我想要类似的东西[[1,2],[2,3]] 最佳答案 uniq方法需要一个block:uniq_a=a.uniq(&:first)或者如果您想就地进行:a.uniq!(&:first)例如:>>a=[[1,2],[2,3],[1,5]]=>[[1,2],[2,3],[1,5]]>>a.uniq(&:first)=>[[1,2],[2,3]]>>a=>[[1,2],[2,3],[1,5]]或者>>a=[[1,2],[2,3],[1,5]

  10. arrays - 在一行中选择数组的第一个和最后一个元素 - 2

    我的任务是从数组中选择最高和最低的数字。我想我很清楚我想做什么，但只是努力以正确的格式访问信息以满足通过标准。defhigh_and_low(numbers)array=numbers.split("").map!{|x|x.to_i}array.sort!{|a,b|ba}putsarray[0,-1]end数字可能看起来像"80917234100"，要通过，我需要输出"9234"。我正在尝试putsarray.first.last，但一直无法弄明白。 最佳答案 有Array#minmax完全满足您需要的方法:array=[80,

随机推荐