- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
嘿,我正在使用垂直选项卡列表创建选项卡式内容。我通过改变背景位置来做到这一点。它在 IE/CHROME 中运行良好,但在移动设备上浏览 safari 时, 动画第一次效果很好,但其他时候背景位置下降太多。
我添加了很多代码,但我认为问题不在于 HTML,因为这在其他浏览器中有效,我只是发布了引用代码。
这是我的动画代码:
<!-- This part is responsible for tabbed content -->
var $tabbed_area = jQuery('#side-tabs-tab ul'),
$tab_content = jQuery('.tab-content-tab');
if ($tabbed_area.length) {
var animating = false,
divAnimated = false;
jQuery('body.home #main-area-tab').css('backgroundImage','none');
$tab_content.hide().filter(':first').show();
$tabbed_area.css( {backgroundPosition: "0px 0px"} );
var isFirstUse = true;
$tabbed_area.find('li a').click(function(){
this_element = jQuery(this);
tab_order = this_element.parent('li').prevAll().length;
previouslyActiveTab = jQuery('.tab-content-tab').filter(':visible').prevAll('.tab-content-tab').length;
if ( (tab_order != previouslyActiveTab) && !animating ) {
$tabbed_area.find('li a.activeTab').removeClass('activeTab');
var marginDelimeter = 177;
if( parseInt(jQuery.browser.version, 10) == 7){
marginDelimeter = 177;
}
activeTop = this_element.position().top - marginDelimeter;
if( navigator.userAgent.match(/iPhone/i)){
//marginDelimeter = 213;
}
animating = true;
var $visibleDiv = $tab_content.filter(':visible'),
$divToAnimate = $tab_content.filter(':eq('+tab_order+')');
$visibleDiv.fadeOut(500,function(){
$visibleDiv.css({opacity:0});
$divToAnimate.css({opacity:1}).fadeIn(500,function(){if (jQuery.browser.msie) this.style.removeAttribute('filter');});
divAnimated = true;
});
$tabbed_area.stop().animate({backgroundPosition:"(0px "+activeTop+"px)"}, 500,function(){
this_element.addClass('activeTab');
if (divAnimated) {
animating = false;
divAnimated = false;
} else {
var wait = setInterval(function() {
if (divAnimated) {
animating = false;
divAnimated = false;
clearInterval(wait);
};
}, 100);
};
});
};
return false;
});
};
<!-- End of tabbed content -->
这是 HTML :
<div id="side-tabs-tab">
<ul style='padding:0px; padding-bottom: 20px;'>
<?php for ($i = 1; $i <= $featured_num; $i++) { ?>
<?php if ($arr[$i]["tabtitle"] == '') $arr[$i]["tabtitle"] = 'Tab Custom field'; ?>
<li class="clearfix"><a href="#" <?php if ($i == 1) echo(' class="activeTab"'); ?>><?php if($arr[$i]["thumb"] <> '') echo('<img src="'.esc_url( $arr[$i]["thumb"] ).'" alt="" width="36" height="37" />'); ?><span><?php echo( esc_html( $arr[$i]["tabtitle"] ) ); ?></span></a></li>
<?php }; ?>
</ul>
</div> <!-- end #side-tabs -->
<div id="main-area-tab">
<?php for ($i = 1; $i <= $featured_num; $i++) { ?>
<div class="tab-content-tab<?php if ($i == 1) echo(' active'); ?>">
<h2 class="title-tab"><?php echo(esc_html($arr[$i]["title"])); ?></h2>
<?php echo($arr[$i]["content"]); ?>
<!--<a href="<?php echo esc_url($arr[$i]["permalink"]); ?>" class="readmore-tab"><span><?php esc_html_e('Read More','MyAppTheme'); ?></span></a> -->
</div> <!-- end .tab-content -->
<?php }; ?>
</div> <!-- end #main-area -->
涉及的所有 PHP 有点困惑,但假设这会很好地输出所有内容。
最后是 CSS:
#side-tabs-tab {background:url(images/tabs-shadow-tab.png) no-repeat scroll 116px 0 transparent; float: left; width: 205px; height: 353px; margin-top: -3px; }
#side-tabs-tab ul {list-style: none; margin-top: 43px; margin-left: 12px; font-size: 16px; background:url(images/arrow-tab.png) no-repeat; padding-bottom: 20px; }
#side-tabs-tab ul li { margin-bottom: 10px; height: 40px; }
#side-tabs-tab ul li a {text-decoration: none; color: #202d37; text-shadow: 1px 1px 0px #e7eff2; display: block}
#side-tabs-tab ul li a img {padding-top: 3px; padding-left: 4px; float: left;}
#side-tabs-tab ul li a span {padding-left: 14px; float: left; display: block; padding-top: 12px;}
#side-tabs-tab ul li a.activeTab {width: 191px; color: #ffffff; text-shadow: 1px 1px 0px #3a515a; }
#main-area-tab {float: left; margin-top: 50px; margin-left: 29px; width:483px;}
#main-area-tab p { line-height: 18px; }
#main-area-tab .tab-content-tab {width: 424px;padding-right:45px;}
#main-area-tab .tab-content-tab h2.title-tab {font-weight: bold; font-size: 20px; margin-bottom: 20px; }
#main-area-tab .tab-content-tab p.post {line-height: 18px; padding-bottom: 23px; padding-top: 20px;}
blockquote {background: url(images/blockquote-tab.png) no-repeat; border: none; margin: 0px; padding-left: 55px;line-height: 18px; color: #202d37; text-shadow: 1px 1px 0px #e7ecee; padding-top: 12px; padding-bottom: 22px; background-position: 0px 15px; }
#main-area-tab a.readmore-tab { background: url(images/readmore-left-tab.png) no-repeat top right; display: block; height: 33px; padding-right: 18px; line-height: 35px; float: right; font-weight: bold; text-shadow: 1px 1px 0px #2d3a40; font-size: 11px; margin-bottom: 26px; margin-right: -36px; float: right; color: #c0cfd5;}
#main-area-tab a.readmore-tab span { display: block; background: url(images/readmore-right-tab.png) no-repeat; padding:0 6px 0 13px; height:33px; }
谁能告诉我我做错了什么?
如果你不明白我的意思,你可以在Here观看直播。 ,进去点击开发服务。
最佳答案
您已经对动画元素的位置进行了硬编码。使用单击按钮的位置来计算结束位置。
关于jquery - 动画在 iPhone 上的移动 Safari 中效果不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11027465/
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时,都会触发一些断点,并且我会被重定向到“源代码”选项卡,并显示消息“调试器已暂停”。问题是我没有设置任何断点,至少是有意的,这
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。 最佳答案 Readability 项目对 chrome 和
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的,似乎在大多数浏览器中都能正常工作,除了 Safari(特别是在 iOS 上)。 我在控制台中遇到的错误是:跨源重定向被跨源资源
如何在 Safari 中为网页添加 IE 等页面转换效果? 最佳答案 你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到,除了 safari,它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢? 示例 http://jsfiddle.net/v
我找遍了这个问题的解决方案,但似乎没有任何效果,如果可以避免的话,我真的不想使用 hack。 当我将 line-height 设置为垂直居中时,我的导航栏在任何地方都居中,但在 safari 中,它的
在输入字段中输入时,safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。 我正在运行 Safari 版本 11.0.1 重现 fiddle : https
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。 这听起来很容易,但事实并非如此! 我需要打开 safari,然后以全屏模式打开谷歌,然后隐藏工具栏。 这将是以下示例的等效项,但对于
嗨, friend 们,我开发了一个 safari 扩展并且也能够构建它。 但是当我尝试安装它时,会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
我想将使用的扩展版本报告给服务。 有没有办法从扩展中读取扩展版本号? 最佳答案 您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。 是否有一个 API 可以让我实现这一点,如果有,它是什么? 最佳答案 您的扩展程序拥有的任何工具
Safari 有一项“功能”,可以在您输入网址时预加载页面。 现在对于大多数用户来说,这确实是一项功能,可以加快页面加载速度。但是对于 Web 开发人员来说,它可能会带来麻烦 - 特别是当它自动加载您
我们有一个正在开发中的 PHP Web 应用程序,它不应该被公众访问(但),但我们不想实现自定义解决方案来防止这种情况发生,因此我们求助于 HTTP 基本身份验证,它通常工作正常但有是 iPhone
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时,该值对于屏幕来说太长了,复制该行只会复制该值的可见部分。有没有办法看到整条线? 最佳答
出于开发目的,我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。 在 Chrome 中,这可以通过使用标志 --disable-web-security 启动来完成。 Safa
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。 在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中,我们将右键单击鼠标按钮或按功能键 F
我有兴趣针对 Safari 浏览器进行一些开发,但我不确定它是否是开源项目?我知道 webkit 是开源的,但这并不意味着浏览器是开源的。 我已经给苹果发了电子邮件,但他们的回复不是很及时,所以我想知
我有一个正确的/etc/hosts 文件,其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l
我是一名优秀的程序员,十分优秀!