简体   繁体   English

CSS在Firefox上不起作用

[英]CSS doesn't work on Firefox

This is the HTML code, i don't know if i'm making a mistake in those < link/> 这是HTML代码,我不知道我在这些<link />中是否犯了错误

<! DOCTYPE html>
<html lang="es">
  <head>
    <title>Appicua</title>
    <link href="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebStyle.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <div class="test"></div>
    <script src="C:/Users/DAVID NEGRETE/Desktop/web/js/jquery.js" type="text/javascript"></script>
    <script src="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebExt.js" type="text/javascript" </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </body>
</html> 

And now this is the CSS code: 现在,这是CSS代码:

.test{
  width:50px;
  height:50px;
  background-color:red;
  border-color:black;
  border-width:5px;
  border-style:solid;
  margin:5%;
}

As you can see is a simple red square, the problem is that all this code works perfect on Google Chrome and Internet Explorer, but on Firefox it's not even displayed on the screen. 如您所见,这是一个简单的红色正方形,问题在于所有这些代码在Google Chrome和Internet Explorer上都可以完美运行,但在Firefox上甚至都没有显示在屏幕上。

Why is that happening? 为什么会这样呢?

Your directory structure looks a little wonky. 您的目录结构看起来有些古怪。 If I'm getting your links correct your working in a directory tree that looks like this: 如果我得到您的链接,请更正您在如下所示的目录树中的工作:

在此处输入图片说明

If your HTML file lives in the web directory then you could create a css directory for your css (like the js folder that you already have) and reference the files relatively as suggested in other answers. 如果您的HTML文件位于Web目录中,则可以为css创建一个css目录(例如您已经拥有的js文件夹),并按照其他答案中的建议相对地引用这些文件。 The relative links would look like this: 相对链接如下所示:

<script src="/js/jquery.js" type="text/javascript"></script>

and

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

The linking style is called relative because the paths to the css and js files provided are relative to the position of the HTML file in the directory structure. 链接样式称为“相对”,因为所提供的css和js文件的路径是相对于HTML文件在目录结构中的位置而言的。

Restructure your files into one directory: 将文件重组到一个目录中:

- appicua
    index.html
    - css
        main.css
    - js
        jquery.js
        main.js

Then you can get main.css with href="./css/main.css" , and main.js with src="./js/main.js" . 然后,您可以使用href="./css/main.css"获得main.css,并使用src="./js/main.js" Relative paths are better here, and will probably work. 相对路径在这里更好,并且可能会起作用。

You also don't need to specify type="text/css" and type="text/javascript" ; 您也不需要指定type="text/css"type="text/javascript" they're redundant as browsers pick CSS for style tags and JavaScript for script tags anyway, and there's confusion about the proper MIME type for JavaScript. 无论如何,它们都是多余的,因为浏览器无论如何都将CSS用作样式标签,将JavaScript用作脚本标签,而且对于JavaScript的正确MIME类型也有一些困惑。

You can also remove the closing / before the > in the link tag. 您也可以在链接标记中的>之前删除结束符/ (Unless you're using XHTML.) (除非您使用的是XHTML。)

I'm guessing that firefox doesnt handle client-side files the same way. 我猜想firefox不会以相同的方式处理客户端文件。 Try putting the css/js files as just src="portalWebStyle.css" as long as they are in the same directory as the file you have open. 尝试将css / js文件放置为src="portalWebStyle.css" ,只要它们与您打开的文件位于同一目录即可。

我不知道这是否可以解决您的问题,但是您忘记了第二个链接标记末尾的/ ,也忘记了关闭第二个script标记。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM