本文将为您提供关于cssjquery位置固定元素在右边.在Firefox中动画BUG的详细介绍，我们还将为您解释jquery固定div位置的相关知识，同时，我们还将为您提供关于CSS3D：rotate
本文将为您提供关于css jquery位置固定元素在右边.在Firefox中动画BUG的详细介绍，我们还将为您解释jquery固定div位置的相关知识，同时，我们还将为您提供关于CSS 3D：rotateY translateX使元素在Firefox中闪烁、CSS – “位置：固定”在Firefox中表现为“绝对”、css – 内联块内的块元素在Firefox中表现奇怪、CSS-HTML5元素在Firefox 3.6.x中不接受负的margin-top的实用信息。
本文目录一览：- css jquery位置固定元素在右边.在Firefox中动画BUG（jquery固定div位置）
- CSS 3D：rotateY translateX使元素在Firefox中闪烁
- CSS – “位置：固定”在Firefox中表现为“绝对”
- css – 内联块内的块元素在Firefox中表现奇怪
- CSS-HTML5元素在Firefox 3.6.x中不接受负的margin-top
css jquery位置固定元素在右边.在Firefox中动画BUG（jquery固定div位置）
我为我的问题创造了一个小提琴：
fiddle
$('#move').click(function (e) {
e.preventDefault();
$(this).not('.up').animate({
bottom: '50%'
},1000,function () {
$(this).addClass('up');
});
$('.up').animate({
bottom: '0%'
},function () {
$(this).removeClass('up');
});
});
Firefox中存在一个错误(我的版本：19.0.2).
单击红色按钮时,它会向右跳转(距离恰好是滚动条的宽度).
当它在右边并且你调整窗口(或小提琴框架)的大小时它会跳回来.
我做错了吗？有没有一个很好的解决方案来解决它？
试试这个
更改
width:100px
至
min-width:100px;
希望能帮助到你.
CSS 3D：rotateY translateX使元素在Firefox中闪烁
我注意到的是：如果父级的透视CSS值高于所讨论元素的计算宽度 – 过渡进展顺利.如果观点真的是罪魁祸首,那么我不理解这种行为的本质;规范说,如果所有点的Z轴值低于透视值,则不绘制元素.在过渡期间,至少应该至少部分可见.
应该注意的是,只有rotateY似乎有问题 – 而不是rorateX.
这是代码示例. html：
<div>
<div id="bg-club"></div>
<div id="bg-cafe"></div>
<div id="bg-fitness"https://www.jb51.cc/tag/fitness/" target="_blank">fitness"></div>
<div id="bg-resto"></div>
<div id="bg-lady"></div>
</div>
CSS(为方便起见,删除了前缀规则)：
.cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
perspective:1000px;
transform-style:preserve-3d;
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
backface-visibility: hidden;
transform: translate3d(0,0);
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{background-color:#987071;}
.background.club{background-color:#a3367f}
.background.fitness{background-color:#79728b;}
.background.lady{background-color:#a6160e;}
.background.resto{background-color:#712912;}
.rotateRoomLeftOut {
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
@keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
这里是the fiddle.按1-5黄色框我们激活相应的背景动画.这里的透视图是1000px,因此可以通过调整窗口大小来实现不希望的效果.
另一个例子是this great set of page 3D transitions.只需导航到Rotate-> Room-> Room to Left或Right.
编辑
似乎Firefox只使那些元素闪烁,其相应的维度(RotateY的宽度或rotateX的高度)大于父级的透视图.我还没想到,为什么会发生这种情况,但到目前为止最简单,最直接的解决方案是将上述视角设置得大于元素的维度.在我的情况下,对于FF 19或其他方式,它将是100vw(或覆盖两个旋转尺寸的100vmax).
更新的代码段：
$(document).ready(function(){
var generalEvtAffix = '.hotdot',bodyEl = $('body'),pageContents = $('.sidebar,.center-block'),tabsSel = $('.areas [data-toggle="tab"]');
// Анимация фонов на главной
var bgs = $('.background');
$('.areas [data-toggle="tab"]').on('click'+generalEvtAffix,function(event){
event.preventDefault();
var thisLink = $(this);
/* Если уже активен или анимация всё ещё не закончена,ничего не делаем */
if(thisLink.parent().hasClass('active') || bgs.hasClass('animated'))
return;
var bg = $('#bg-'+this.getAttribute('data-bg')),bgActive = $('.background.active');
/* Случайным образом определяем направление анимации. */
var animationDirs = ["Left"/*,"Top","Right","Bottom" */],animationDirection = animationDirs[Math.floor(Math.random() * (animationDirs.length) + 0)];
/* - отключаем клик по ссылке на направлении - чтобы временно заблокировать переключение вкладок */
tabsSel.on('click'+generalEvtAffix+'.clicked',function(e){
e.preventDefault();
return false;
});
bgActive.addClass('animated rotateRoom'+animationDirection+'Out')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click',function(){
/* По окончании анимации "Прочь" прошлого активного элемента скрываем его */
$(this).removeClass('animated active rotateRoom'+animationDirection+'Out')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');
});
bg.addClass('animated active rotateRoom'+animationDirection+'In')
.on('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click',function(event){
/* По окончании анимации обратно включаем клик. */
console.log(event);
$(this).removeClass('animated rotateRoom'+animationDirection+'In')
.off('animationend.homepage-area-click webkitAnimationEnd.homepage-area-click');;
tabsSel.off('click'+generalEvtAffix+'.clicked');
});
});
});
.cont{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
overflow:hidden;
-webkit-perspective:1000px;
-moz-perspective:1000px;
perspective:1000px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
@-moz-document url-prefix(){
.cont{
perspective:100vw;
}
}
.background.active{
visibility:visible;
z-index:1;
}
.background{
position:absolute;
top:50px;
right:50px;
bottom:50px;
left:50px;
z-index:10;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0,0);
-moz-transform: translate3d(0,0);
transform: translate3d(0,0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
visibility:hidden;
overflow:hidden;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.background.cafe{
background-color:#987071;
}
.background.club{
background-color:#a3367f
}
.background.fitness{
background-color:#79728b;
}
.background.lady{
background-color:#a6160e;
}
.background.resto{
background-color:#712912;
}
/* Классы анимации фона типа "Room" */
.rotateRoomLeftOut {
-webkit-transform-origin: 100% 50%;
-webkit-animation: rotateRoomLeftOut 4s both ease;
-moz-transform-origin: 100% 50%;
-moz-animation: rotateRoomLeftOut 4s both ease;
transform-origin: 100% 50%;
animation: rotateRoomLeftOut 4s both ease;
}
.rotateRoomLeftIn {
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRoomLeftIn 4s both ease;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRoomLeftIn 4s both ease;
transform-origin: 0% 50%;
animation: rotateRoomLeftIn 4s both ease;
}
/* Описание анимаций */
@-webkit-keyframes rotateRoomLeftOut {
to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@-moz-keyframes rotateRoomLeftOut {
to { opacity: .3; -moz-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
to { opacity: .3; transform: translateX(-100%) rotateY(90deg); }
}
@-webkit-keyframes rotateRoomLeftIn {
from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@-moz-keyframes rotateRoomLeftIn {
from { opacity: .3; -moz-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
from { opacity: .3; transform: translateX(100%) rotateY(-90deg); }
}
.areas{
list-style:none;
position:relative;z-index:1000;
}
.areas li a{
display:block;
width:20px;
height:20px;
background:yellow;
margin:5px;
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="bg-club"></div> <div id="bg-cafe"></div> <div id="bg-fitness"https://www.jb51.cc/tag/fitness/" target="_blank">fitness"></div> <div id="bg-resto"></div> <div id="bg-lady"></div> </div> <ul> <li><a href="#club"data-target="[data-tab='club']" data-bg="club" data-toggle="tab">1</a> </li><li><a href="#cafe"data-target="[data-tab='cafe']" data-bg="cafe" data-toggle="tab">2</a> </li><li><a href="#fitness"https://www.jb51.cc/tag/fitness/" target="_blank">fitness" data-target="[data-tab='fitness']" data-bg="fitness" data-toggle="tab">3</a> </li><li><a href="#resto"data-target="[data-tab='resto']" data-bg="resto" data-toggle="tab">4</a> </li><li><a href="#lady"data-target="[data-tab='lady']" data-bg="lady" data-toggle="tab">5</a> </li> </ul>
仍然期待这种行为背后的原因.
解决方法
如果你的视角是1000px,宽度为1100px的东西旋转,那么元素的边缘将在你身后传递并离开视图,mozilla可能会将其视为“不渲染”
我能为一致视图提供的唯一解决方案是将视角设置为100vw,以确保您的视角总是在屏幕宽度范围内
CSS – “位置：固定”在Firefox中表现为“绝对”
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
这是我为主导航包装器(它是一个底部导航)的CSS.在Webkit中,它的工作原理很好：就是说,它贴在窗口的底部.在Firefox中,它将自己定位在标签的末尾,所以,例如,在一个长的页面上,我必须向下滚动才能看到它.它表现得好像是绝对的.
我也有一个侧边栏导航.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
这个侧边栏的作用就好像是绝对的 – 也就是说,它正好从屏幕上定位,但它正在延长< body>因此出现水平滚动条.身高：100％;也正在响应< body>高度而不是窗口高度,所以例如我的< header>具有20px的顶部边距,并且滑块还观察到边缘(身体具有0边缘).同样,而不是高度：100％;结束于窗口的底部,它结束于< body>底部,从而将页脚的底部边缘分解.
为什么我这样发生的事情,我无法理解我的生活.元素检查显示所有属性都正在加载,而在Chrome和Safari中它可以正常工作.它最初工作,最后一次甚至编辑导航,但是自从我建立了其他不相关的站点部分以来,它已经停止工作了.
http://www.upprise.com/demo.php – 点击信封图标查看侧边栏
解决方法
-o-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
我最初添加了这个代码,以防止在整个网站的某些CSS转换中闪烁,但我想我现在必须将其添加到每个类.
css – 内联块内的块元素在Firefox中表现奇怪
小提琴：http://jsfiddle.net/4mrt8wq3/
<style>
.b { display: inline-block; }
#a { display: block; }
</style>
<div>
<label>xxxxxxxxxx</label>
<input type="text" id="a"/>
</div>
<div>
<label>xxxxxxxxxx</label>
<div> / </div>
</div>
仅在Firefox中,第一个div位于比第二个低一行的位置.它在Chrome和IE中正常工作(至少IE11).就好像内联块中的块元素由于某种原因而包裹在第二个元素下面.
使用溢出：隐藏在第一个div上修复了问题,但是第二个div然后稍微奇怪地定位,其上方有大约4或5个像素的边距.在两者上放置overflow-hidden会使其正确呈现.
我不是在寻找问题的解决方案,因为我已经找到了一个,但我无法解释这种行为……任何人都可以解释为什么这样做？
解决方法
在带有“b”类的第二个div中,内部div本身包含一个用于保存“/”字符的线框.然后,它为第二个div提供了类“b”的基线.
该基线必须与第一个div的基线对齐,并且类别为“b”.问题变成：该div中最后一个行框的基线在哪里？
通过使输入元素本身显示：block,Firefox¹认为输入元素被“替换”,它的内容对CSS是不透明的,因此输入元素不会创建任何行框.所以带有类“b”的第一个div的最后一行是包含标签的那一行,并且与’/’字符的行对齐.
Chrome采用了不同的视角. Chrome将输入元素视为具有CSS可见的内部结构,因此元素的内部形成一个线框,其基线随后成为第一个div的基线,类为“b”,并且它与’/’字符.
当你添加`overflow：hidden’时,它会影响内联块的基线,使它们的基线不再是它们最后包含的线框的基线,并成为元素的下边距边缘.
哪种行为是正确的还不清楚.这取决于历史和被取代的元素的有点掺杂的概念.在浏览器的早期阶段,一些元素的呈现被委托给外部系统,即底层操作系统或插件.特别是,输入元素也是如此,其中渲染是通过O / S调用完成的. O / S没有CSS概念,因此必须定义规则以允许有效的黑盒子与页面的其余部分进行交互.这些元素被归类为“替换”元素.
请注意这个定义的方式.没有正式的元素列表是替换元素,如果浏览器选择将其渲染委托给CSS世界之外的系统,则元素是替换元素,因此理论上你可以有两个浏览器,一个委托渲染元素和一个本地渲染它,并从CSS规则获得完全不同的交互.
随着浏览器的发展,他们停止委托他们对输入元素的渲染并自己渲染它,在渲染CSS的过程中.这会导致问题,因为现存的网页(假设输入元素将使用替换元素的规则呈现)可能变得不可用.如果浏览器允许这种情况发生,它将失去市场份额.因此,在大多数情况下,为了避免这种情况,浏览器实现这些元素的布局以与页面交互,就好像它们是被替换的元素一样,即使实际上它们不是.
他们在这方面走得多远并没有明确规定. HTML5规范无法将表单控件识别为替换元素,并建议将它们呈现为内联块,这会使Chrome的行为正确,但是包括Chrome在内的所有浏览器都有很多种方式不会表现出来.从向后兼容性角度看旧Web内容,Firefox行为更可靠.
在表单控件的布局比当前情况更紧密地指定之前,不可能最终确定哪种行为是正确的.
¹对我来说,IE11的行为与Firefox类似. Opera 28(像Chrome这样的闪烁引擎)就像Chrome一样. Opera 12(presto引擎)的行为与Firefox类似.
CSS-HTML5元素在Firefox 3.6.x中不接受负的margin-top
我正在尝试在元素上使用负的上边距,并且它在Firefox中不起作用. Chrome和IE(使用HTML5-shiv)正在正确呈现它.我已经给出了HTML5元素(包括display：块).
有什么想法吗？ CSS(如果需要)：
aside,article,section { display: block; }
section#banner {
background: url(images/banner.png) no-repeat 3px 3px;
border: #CCD1DB 1px solid;
-moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius: 10px; /* Saf3+,Chrome */
border-radius: 10px; /* Opera 10.5,IE 9 */
-moz-Box-shadow: 0px 0px 4px #E0E3E9; /* FF3.5+ */
-webkit-Box-shadow: 0px 0px 4px #E0E3E9; /* Saf3.0+,Chrome */
Box-shadow: 0px 0px 4px #E0E3E9; /* Opera 10.5,IE 9.0 */
display: block;
height: 350px;
margin: -50px auto 0;
overflow: hidden;
padding: 3px;
position: relative;
width: 600px;
}
The section element is not a generic
container element. When an element is
needed for styling purposes or as a
convenience for scripting,authors are
encouraged to use the div element
instead. A general rule is that the
section element is appropriate only if
the element’s contents would be listed
explicitly in the document’s outline.
更多资源：
http://html5doctor.com/the-section-element/
今天的关于css jquery位置固定元素在右边.在Firefox中动画BUG和jquery固定div位置的分享已经结束，谢谢您的关注，如果想了解更多关于CSS 3D：rotateY translateX使元素在Firefox中闪烁、CSS – “位置：固定”在Firefox中表现为“绝对”、css – 内联块内的块元素在Firefox中表现奇怪、CSS-HTML5元素在Firefox 3.6.x中不接受负的margin-top的相关知识，请在本站进行查询。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
