个人中心
gpt4 book ai didi

css - PNG 24位透明度是否使用:after pseudo-element在IE8中加载

转载 作者：行者123 更新时间：2023-11-28 18:30:24 25 4
gpt4 key购买 nike

我的同事编写了一些 CSS 来在图像上放置一个带有透明背景的箭头的小 PNG。但是，他将它应用于 anchor 标记的 :after 伪元素。

这适用于除 IE8 之外的所有现代浏览器。他声称这在 IE8 中有效，但我们都无法弄清楚为什么它不再有效。

HTML

<html>
<head>
<title>IE8 PNG transparency test with :after</title>
</head>
<body>
<div id="channel-feat-lists" class="feat-lists feat-stories is-invisible mod with-border">
<h4>TOP 3 STORIES</h4>
<ul class="tout-stack">
<li id="c1" class="tout">
   <div class="tout-image size-160x165"><a href="#" class="video-link"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg"
              alt="#"
              width="160"
              height="165" /></a></div>
   <h6><a href="#" class="has-number"><span class="tout-title-number">7 </span><span class="tout-title-remainder">Ideas for Kids' Forts</span></a></h6>
   <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div>
   <div class="tout-jump"><a class="jump">SEE MORE FUN VIDEOS</a></div>
</li>
<li id="c2" class="tout">
   <div class="tout-image size-160x165"><a href="#"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg"
              alt="#"
              width="160"
              height="165" /></a></div>
   <h6><a href="#" class="has-number"><span class="tout-title-number">8 </span><span class="tout-title-remainder">Ideas for Kids' Forts</span></a></h6>
   <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div>
   <div class="tout-jump"><a class="jump" href="#">SEE MORE FUN VIDEOS</a></div>
</li>
<li id="c3" class="tout">
   <div class="tout-image size-160x165"><a href="#"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg"
              alt="#"
              width="160"
              height="165" /></a></div>
   <h6 class="has-no-number"><a href="#">Example numberless title</a></h6>
   <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div>
   <div class="tout-jump"><a class="jump" href="#">SEE MORE FUN VIDEOS</a></div>
</li>
<li id="c4" class="tout">
   <div class="tout-image size-160x165"><a href="#"><img src="http://img4.realsimple.com/images/home-organizing/decorating/0812/boy-tunnel-fort-ictcrop_160.jpg"
              alt="#"
              width="160"
              height="165" /></a></div>
   <h6><a href="#" class="has-number"><span class="tout-title-number">8 </span><span class="tout-title-remainder">Ideas for Kids' Forts</span></a></h6>
   <div class="tout-dek">Want to create a fortress mighty enough to withstand any big bad wolf's huffs and puffs? Get inspired by these seven creations.</div>
   <div class="tout-jump"><a class="jump" href="#">SEE MORE FUN VIDEOS</a></div>
</li>
</ul>
</div>
</body>
</html>

CSS

.feat-lists .tout { min-height: 165px; margin-top: 14px; }
.feat-lists .tout + .tout { border-top: 1px dotted #7f7f7f; padding-top: 14px; }  
.feat-lists .tout-image { float: left; margin-left: 7px; }
.feat-lists .tout-image a { display: block; position: relative; }
.feat-lists .video-link:after { background: transparent url('http://img4.realsimple.com/static/i/play-overlay.png') 0 0; content: ''; height: 24px; left: 70px; position: absolute; top: 70px; width: 19px; }
.feat-lists h6 { margin-left: 181px; }
.feat-lists h6 a { color: #333333; font: normal 1.8em Georgia, sans-serif; }
.feat-lists h6 a.has-number:hover { text-decoration: none; }
.feat-lists h6 a.has-number:hover .tout-title-remainder { text-decoration: underline; }
.feat-lists .tout-title-number { color: #999999; display: block; font: normal 2.777em Georgia, sans-serif; margin-bottom: -4px; position: relative; top: -6px; } /* 2.777 x 1.8 = 5 = 50px */
.feat-lists .tout-dek { color: #666666; font: normal 1.3em Georgia, sans-serif; margin: 5px 0px 5px 181px; }
.feat-lists .tout-jump { margin-left: 181px; }
.feat-lists h6.has-no-number { padding: 2.5em 0 0 0; }

这是 JSFiddle 版本: http://jsfiddle.net/tangst/gByMb/

第一张图片应该有那个叠加层。

我在 PNG transparency prоblеm in IE8 中尝试了一些解决方案, 但它们不起作用。

有人遇到过这个吗？

最佳答案

问题不在于 PNG，而是 IE8 对 :after/:before 伪元素的支持。

在这里查看支持的浏览器列表:http://css-tricks.com/browser-support-pseudo-elements/

显然 IE8 有“部分支持”:

“不遵守 z-index，必须使用文档类型，如果使用 :hover:after/:hover:before，则必须声明 :hover 状态”

关于css - PNG 24位透明度是否使用:after pseudo-element在IE8中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14512927/

25 4 0
文章推荐： javascript - "function incrementNumber()"括起来的括号是可选的吗？
文章推荐： ios - Swift 2 - m4a 文件无法在 iOS 上播放
文章推荐： python - numpy 是否为此积累了正确的东西？
文章推荐： ios - 如何测量 UITableViewCell 的加载时间？
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com