不在移动环境下工作的CSS照明盒
不在移动环境下工作的CSS照明盒
提问于 2015-02-25 19:52:24
我使用这个代码(http://codepen.io/gschier/pen/HCoqh)作为我的一个页面的光明盒(请参阅这里的页面：_)。
由于某种原因，它在桌面上工作得很好，但在我的iPhone上却没有显示图像。您可以通过单击Press区域中的第一个图像来再现问题。
还有另一个，但不那么紧迫的问题，当我在我的iPad上滚动时，光照盒的背景不会覆盖页面的其余部分。最初是这样的，但是当我滚动的时候，背景看起来是“锁定”的，显示了下面页面的其余部分。您可以通过单击Press区域中的第一个图像，然后滚动来再现问题。
下面是HTML：
<!--PRESS CONTENT-->
<div class="presscoll">
<a href="#65Bremner5301-1015"><img src="images/65Bremner5301-1015-thumb.jpg" width="470" class="round press" /></a>
<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="65Bremner5301-1015">
<img src="images/65Bremner5301-1015.jpg" class="round">
</a>
<a href="http://www.theglobeandmail.com/life/life-video/style-trumps-amenities-in-summerhill-condo-sale/article13070968/" target="_blank"><img src="images/33-price-video-cover.jpg" class="round press" /></a>
</div>
<!-------------------------------------------------------------------->
<div class="presscolm">
<a href="#57alcorn"><img src="images/57alcorn-thumb.jpg" width="470" class="round press" /></a>
<a href="#_" class="lightbox" id="57alcorn">
<img src="images/57alcorn.jpg" class="round">
</a>
<a href="http://www.theglobeandmail.com/life/life-video/tour-a-high-end-moore-park-new-build/article13070965/" target="_blank"><img src="images/163-heath-video-cover.jpg" class="round press" /></a>
</div>
<!-------------------------------------------------------------------->
<div class="presscolm">
<a href="http://www.theglobeandmail.com/life/life-video/video-see-how-this-bedford-park-home-sold-for-over-1-million-in-four-days/article12392721/" target="_blank"><img src="images/322-fairlawn-video-thumb.jpg" class="round press" /></a>
</div>
<!-------------------------------------------------------------------->
<div class="presscolr">
<a href="http://www.theglobeandmail.com/life/life-video/how-much-home-does-27-million-get-you-in-forest-hill/article12870916/" target="_blank"><img src="images/204-rosemary-video-thumb.jpg" class="round press" /></a>
</div>
<!--PRESS CONTENT-->以及CSS (我对其进行了编辑以使图像可滚动和可缩放)：
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background-color: #fafbff;
overflow:auto;
}
.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
margin-top: 2%;
border: solid 1px #E0E0E0;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
/** LIGHTBOX MARKUP **/回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-25 20:41:43
您的retina.js导致了这个问题。计算宽度和高度时，会返回0，因为图像是隐藏的。
您可以尝试通过将图像移出屏幕来隐藏图像。首先将.lightbox类设置为显示块。然后为lightbox类设置这些
display: block;
top: -9999px;
left: -9999px;然后单击哪个是:target css，更新为
.lightbox:target {
/** Remove default browser outline */
outline: none;
top: 0;
left: 0;
}我已经在我的本地测试过这个，它可以在chrome上工作，也应该在iphone上工作。
重要的是-如果你运行的是视网膜macbook，你可以看到同样的问题在铬或野生动物园。这是webkit的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28728344
复制相关文章
相似问题
腾讯云开发者
