负值margin-top在firefox中不起作用

时间:2016-02-06 18:52:45

标签: html css firefox

我正在开发一个项目,我遇到了Firefox的问题,我无法弄清问题是什么。我是HTML和CSS的新手。

该网站的链接是http://parapentemontanita.com/

除了IE和Firefox之外的所有浏览器都可以完美运行。 我的问题是说" VUELOS DE PARAPENTE TANDEM"谁的班级是串联的。 margin-top:-350px无效。

.tandem
{
    position: relative;
    margin-top: -350px !important;

}

提前致谢

2 个答案:

答案 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中元素的实际高度:

enter image description here

我在Firebug中做了很多重新定位以获得下面的结果。我已将realtive等中的每个#tandem定位元素设置为absolute。改变了一些负面的顶级定位。您必须使用它,但关键字是absolute; - )

enter image description here

至少有一点提示,请优化您的图像。目前,桌面和移动设备上的页面权重超过12MB ,小滑块的图片为fullhd,缩小并保存为.jpg

每个移动连接速度较慢的人都会感激不尽; - )

enter image description here