浏览器兼容性问题：布局在 Firefox 中不起作用答案

【问题标题】：Browser compatibility issue: layout not working in Firefox浏览器兼容性问题：布局在 Firefox 中不起作用
【发布时间】：2013-10-26 23:06:10
【问题描述】：

我遇到了浏览器问题，甚至在不同的 PC 上使用同一个浏览器时也出现问题。

我的链接不在背景上。使用 Firefox，不透明度不起作用，或者定位。

您可以在这里查看网站www.haelu.co.nf

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Haelu</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>



<a id="button1" href="https://soundcloud.com/haelu">
<img src="images/Button1.png" border="0"></a> 

<a id="button2" href="/videos.html">
<img border="0" src="images/Button2.png" ></a>

</body>

</html>

外部 CSS：

html { 
    background: url(images/WebBack1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@font-face {
    font-family: webfont;
    src: url(thinnyness.ttf);
    src: local('Delicious'), local(Delicious'),
    url(thinnyness.ttf) format('truetype');
}

body {
    font-family:Webfont;
    align: center;
}

#button1 { 
    position: absolute; 
    top: 364px; 
    left: 557px; 
    opacity:0.1;
}

#button1:hover {
    position: absolute; 
    top: 364px; 
    left: 557px; 
    opacity:1.0;
}

#button2 { 
    position: absolute; 
    top: 292px; 
    left: 648px; 
    opacity:0.1;
}   

#button2:hover {
    position: absolute; 
    top: 292px; 
    left: 648px; 
    opacity:1.0;
}

.center {
    margin: 0 auto;
    width: 500px;
}

#container {
   position: absolute;
   top: 50%;
   margin-top: -130px;/* half of #content height*/
   left: 0;
   width: 100%;
}

【问题讨论】：

看起来你的字体定义搞砸了。在谷歌中寻找“防弹字体语法”。
字体没有问题。它有效，但我知道这是一团糟
问题在于链接。它们在不同的浏览器和电脑上的位置不一致，在 Firefox 上它们的不透明度不起作用，它们在左上角的屏幕中
对不起，你是对的。该字体不适用于Firefox。而且我的视频在 Firefox 中的位置也不正确 :(

标签： html css browser opacity

【解决方案1】：

我相信您的问题是 CSS 中的语法错误：

@font-face {
    font-family: webfont;
    src: url(thinnyness.ttf);
    src: local('Delicious'), local(Delicious'),
    url(thinnyness.ttf) format('truetype');
}

您在第二个 local(Delicious') 声明中缺少前导撇号。这会导致整个样式表中断，从而阻止定位工作。

【讨论】：