瀏覽器兼容性問題：佈局不工作在Firefox

我有瀏覽器問題，甚至在不同的PC上使用相同的瀏覽器的問題。瀏覽器兼容性問題：佈局不工作在Firefox

我的鏈接不在背景中。使用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%; 
}

來源

2013-10-24 Haelu

看起來像你有一些字體的定義搞砸了。在google中尋找'防彈字體語法'。 – LorDex

字體沒有問題。它的工作原理，但我知道這是一個混亂 – Haelu

問題是鏈接。他們的位置在不同的瀏覽器和電腦上不一致，在Firefox上，他們的不透明度不起作用，他們在左上角的屏幕 – Haelu

我相信你的問題是在你的CSS語法錯誤：

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

您錯過了第二個local(Delicious')聲明中的前導撇號。這導致整個樣式表中斷，從而阻止定位工作。

來源

2013-10-24 22:54:17

瀏覽器兼容性問題：佈局不工作在Firefox

回答

相關問題