我正在开发一个项目,我遇到了Firefox的问题,我无法弄清问题是什么。我是HTML和CSS的新手。
该网站的链接是http://parapentemontanita.com/
除了IE和Firefox之外的所有浏览器都可以完美运行。 我的问题是说" VUELOS DE PARAPENTE TANDEM"谁的班级是串联的。 margin-top:-350px无效。
.tandem
{
position: relative;
margin-top: -350px !important;
}
提前致谢
答案 0 :(得分:1)
我认为这是因为上面的块的样式。
您有三个具有类col-md-4 col-xs-12
的块,并且在每个块中都阻塞了类box_index
。这些col-md-4 col-xs-12
是浮点数,clear:both;
伪元素中有::after
。
box_index
内的 col-md-4 col-xs-12
块声明top:-290px;
。因此内容向上移动290px,但容器col-md-4 col-xs-12
保持其计算的高度。而且由于明确,下一个内容在结束后开始。您强行向下移动下一个容器,但容器的内部元素是浮动并遵守clear:both;
规则。所以你也需要移动它们。
但最好将top
更改为margin-top:-290px;
。
您不再需要margin-top:-350px
section.tandem
了。
P.S。在firefox 44中测试过,但我认为也适用于Chrome。
答案 1 :(得分:0)
margin-top:-350px
定位无!important
,所以请不要使用重要内容。只有当您必须覆盖自动生成的内联样式时,才能删除。否则,您会遇到越来越多的问题,并使用CSS中的!important
。
在你的情况下:
你的布局中有一堆负面定位...没关系,但你的定位类型错了。您使用relative
,但必须使用absolute
定位。
absolute
:元素高度和宽度不在正常内容流中
relative
:元素的高度和宽度位于正常的内容流中,并采用维度
让我们取元素id="tandem"
,给它们一个像底部的轮廓,这样你就可以看到元素的真实高度:
#tandem {
outline: 1px solid red;
}
outlineing the container of #tandem:
.col-md-4.col-xs-12 {
outline: 1px solid yellow;
}
and the header
#tandem header {
outline: 1px solid black;
}
在图片上,您可以看到Firefox中元素的实际高度:
我在Firebug中做了很多重新定位以获得下面的结果。我已将realtive
等中的每个#tandem
定位元素设置为absolute
。改变了一些负面的顶级定位。您必须使用它,但关键字是absolute
; - )
至少有一点提示,请优化您的图像。目前,桌面和移动设备上的页面权重超过12MB ,小滑块的图片为fullhd,缩小并保存为.jpg
。
每个移动连接速度较慢的人都会感激不尽; - )