如何解决需要 CSS 帮助来停止在带有溢出的 <td> 中滚动
所以,我有一个小问题,主要是由于疲倦和整天花在这上面。我知道这是一件很简单的事情,我只是在逃避。
我正在构建一个用于工作的 html 电子邮件滑块,我正在修改另一个系统来创建它。我已将滑块箭头定位在图像下方并将溢出设置为可见。 这使得 td 滚动以适应溢出。我需要改变一些东西,以便它不会滚动并且是全高。我很茫然。 我只需要另一组新鲜的眼睛来帮助我...正如你们所知,为电子邮件制作滑块并使其在多个设备上工作并不容易。
这里的代码笔:https://codepen.io/ryangliozzo/pen/VwmGzbe
谢谢大家,
瑞恩。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<style>
body{
padding:0;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* bugfix for Android 4.4 to support e ~ y */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
/* Hide Fallback content first */
.fallback{
display:none;
}
.carousel{
display:block !important;
max-height:none !important;
position:relative;
overflow-y:visible !important;
}
/*
Selective blocking for clients.
- Samsung (#MessageViewBody) - no absolute positioning
- Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
*/
#MessageViewBody .fallback,body.MsgBody .fallback{
display:block;
}
#MessageViewBody .carousel,body.MsgBody .carousel{
display:none !important;
}
input{display:none;}
.carousel a{
width:100%;
display:block;
overflow:hidden;
}
.carousel .car-frames img{
display:block!important;
width:100% !important;
height:auto !important;
}
.carousel.responsive{
width:100% !important;
}
.carousel.slide a{
position:absolute;
top:0px;
left:0px;
opacity:1;
width:100%;
-webkit-animation: slide-anim 15s linear infinite;
}
.carousel.slide a:nth-child(1){
position:relative;
-webkit-animation-delay: -16s;
}
.carousel.slide a:nth-child(2){
-webkit-animation-delay: -11s;
}
.carousel.slide a:nth-child(3){
-webkit-animation-delay: -6s;
}
/* iOS doesn't like negative delay with translates (transform:translateX(100%);) */
/* So we use margin although it is less "smooth" */
@-webkit-keyframes slide-anim
{
/* start slide in */
0% {
margin-left:100%;
}
/* end slide in */
5%{
margin-left:0%;
}
/* start slide out */
33.3333%{
margin-left:0%;
}
/* end slide out */
38.3333%{
margin-left:-100%;
}
100%{
margin-left:-100%;
}
}
.carousel.slide .car-radio:checked ~ .car-cont .car-frames{
position:relative;
left:0px;
top:0px;
width: 300% !important;
transition: left 1s;
}
.carousel.slide .car-radio2:checked ~ .car-cont .car-frames{
left:-100%;
}
.carousel.slide .car-radio3:checked ~ .car-cont .car-frames{
left:-200%;
}
.carousel.slide .car-radio:checked ~ .car-cont a{
width:33.333%;
}
.carousel.slide .car-radio:checked ~ .car-cont a:nth-child(2){
position:absolute;
left:33.333%;
top:0px;
}
.carousel.slide .car-radio:checked ~ .car-cont a:nth-child(3){
position:absolute;
left:66.666%;
top:0px;
}
/* Navigation arrows */
.carousel .car-ltn,.carousel .car-rtn {
z-index:100;
display: none;
width: 10%;
height: 100%;
position: absolute;
background-color:transparent;
top:0px;
cursor:pointer;
}
.car-ltn {
left:0px;
}
.car-rtn {
right:0px;
}
.carousel .car-ltn::after,.carousel .car-rtn::after {
content: '';
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
position: absolute;
top:120%;
margin-top:-8px;
-webkit-filter: drop-shadow(1px 1.5px 1px rgba(0,.4));
}
.car-ltn::after {
border-right: 40px solid #212734;
left: 40%;
}
.car-rtn::after {
border-left: 40px solid #212734;
right: 40%;
}
.carousel #car-cBox-support:checked ~ .car-cont .car-nav-1 {
display:block;
}
.car-radio2:checked ~ .car-cont .car-controls .car-nav-2,.car-radio3:checked ~ .car-cont .car-controls .car-nav-3 {
display:block;
}
.carousel .car-radio:checked ~ .car-cont,.carousel .car-radio:checked ~ .car-cont *,.carousel .car-radio:checked ~ .car-thumbnails * {
-webkit-animation: none;
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0"><tr>
<td> </td>
<td width="480" style="background-color:#ffffff">
<BR>
<!-- content -->
<!-- animated carousel -->
<!--[if !mso]><!-- -->
<div class="carousel slide responsive" style="overflow:hidden;display:none;max-height:0px;width:480px;">
<input id="car-cBox-support" type="checkBox" checked style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-1" class="car-radio car-radio1" style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-2" class="car-radio car-radio2" style="display:none!important">
<input name="car-radio" type=radio id="car1-radio-3" class="car-radio car-radio3" style="display:none!important">
<div class="car-cont" style="position:relative;background-color:#ffffff;">
<div class="car-frames">
<a href="#"><img class="zoom-in" src="http://freshinBox.com/examples/animated-carousel/images/car-castle.jpg" border="0"></a>
<a href="#"><img class="zoom-out" src="http://freshinBox.com/examples/animated-carousel/images/car-meadow.jpg" border="0"></a>
<a href="#"><img class="pan-right" src="http://freshinBox.com/examples/animated-carousel/images/car-coast.jpg" border="0"></a>
</div>
<div class="car-controls">
<label for="car1-radio-3" class="car-ltn car-nav-1"></label>
<label for="car1-radio-2" class="car-rtn car-nav-1"></label>
<label for="car1-radio-1" class="car-ltn car-nav-2"></label>
<label for="car1-radio-3" class="car-rtn car-nav-2"></label>
<label for="car1-radio-2" class="car-ltn car-nav-3"></label>
<label for="car1-radio-1" class="car-rtn car-nav-3"></label>
</div>
</div>
</div>
<!--<![endif]-->
<BR><BR>
<!-- static fallback content -->
<div class="fallback">
<a href="https://www.google.com/search?q=fallback" ><img src="http://freshinBox.com/examples/animated-carousel/images/carousel-fallback.jpg" height="320" width="500" style="display:block;" border="0"></a>
</div>
<!-- /content -->
</td><td> </td>
</tr></table>
<BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>
解决方法
似乎在第 219 行 overflow:hidden
可能是罪魁祸首。
对 overflow:clip
的更改似乎解决了您描述的问题。
试试:
/* Navigation arrows */
.carousel .car-ltn,.carousel .car-rtn {
top:calc(-100% + [50% of carousel height in px]);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。