Question

我有一个非常讨厌的问题。我已经使用CSS设计了我的网站，它似乎在谷歌Chrome和IE中完美运行，但CSS设计并非都在Firefox中运行。可能是什么问题，我尝试了很多东西仍然无法正常工作。由于不允许新用户发布图像。我无法用屏幕截图解释。

我在Index.php中的代码

     <!Doctype html>
     <html lang="en">
     <title>Online Voting RTC</title>
     <head>


     <link type="text/css" rel="stylesheet"  href="css\style.css">
     <script type="text/javascript" src="js\create_text_box.js">
     </script>

     </head>
     <body>
     <div id="wapper">
        <!-- Define Header -->
        <?php include("header.php"); ?>
        <!-- End Header -->

        <!-- Main content area -->
        <?php include("maincontent.php");?>
        <!-- End of Main content area -->

        <!-- Left Sidebar -->
        <?php include("sidebar.php");?>
        <!-- End Left Sidebar -->


        <!-- Footer -->
        <?php include("footer.php");?>
        <!-- End of Footer -->
     </div>
     </body>
     </html>

这是Css部分

 body {
background: #ffffff;
margin: 0;
padding: 0;
}

#wrapper {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    background: #dddddd;
}

#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #403cf7;
}

.logo {
    float:left;
    position:relative;
    left:20px;
    top:20px;
}

.pagetitle {
    float:left;
    position:relative;
    left:550px;
    top:20px;
}
 .usermenu {
    float:right;
    position:relative;
    right:20px;
    top:20px;
 }

 #sidebar {
width: 20%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ffff99;
text-align: center;
  }

 #maincontent {
width: 80%;
height: 600px;
margin: 0;
padding: 0;
border: 0;
float: right;
background: #95dff8;
}

#footer {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
    border: 0;
    float: left;
    background: #272727;
}

/*-----------------------------------------CSS for navigation    Menu------------------------*/
  #navMenu{
color:#d4d3d3;
font-family:Geneva;
float:left;

 }

  #navMenu ul li a{

text-decoration:none;
color:#989694;
}

 #navMenu ul li a:hover{
color:#f46322;
}


 #navMenu ul{
padding:0;
 margin:0;
margin-left:25px;
list-style:none;
position:relative;
left:20px;
top:20px;
 }
/*----------------------------------------------------------------------------------------*/

如果有人能在这种情况下帮助我，我将非常感激。实际上我正在检查浏览器兼容性，我遇到了这个问题。提前致谢：D

Answer 1

URL中不允许使用字符“\”（反斜杠）;将其更改为“/”（正常斜线）。有些浏览器隐式将不正确的“\”转换为“/".

Answer 2

尝试删除type =“text / css”。

您的代码应如下所示：

<link rel="stylesheet" href="css/style.css">

Answer 3

您需要关闭链接代码

<link type="text/css" rel="stylesheet"  href="css/style.css" />

如果您的css文件夹不在您网站的路线目录中，那么您最好使用

<link type="text/css" rel="stylesheet"  href="/css/style.css" />

因为如果您将页面移动到其他文件夹，这仍然有用。

您还需要在HEAD元素中移动标题标记以使HTML有效。

Answer 4

我也有这个问题。一旦我从容器类中删除了-1的z-index。链接再次开始工作。

Css链接无法在Firefox中工作

4 个答案: