网页只能在IE中正确显示,而不能在Chrome和Firefox中显示

时间:2013-04-30 09:09:06

标签: html internet-explorer google-chrome firefox

这是我的.css文件。 (请记住,我是第二年学习Web Design 1的IT学生!):

<style>

h1 {background: #48a627;} 
h1 {text-decoration:none;}
h1 {font-family: Ariel, Halavetica, sans-serif;}
h1 {color: white;}
h1 {font-size: 50px;}
h1 {text-align: center;}

body {background-color:#48a627} 
body {text-decoration:none;}
body {color: black}
body {font-family: font-family: Ariel, Halavetica, sans-serif}
body {font-style: normal}
body {font-size: 20px;}

p {background-color: #48a627}
p {text-decoration:none;}
p {color: #181818}
p {font-family: Ariel, Halavetica, sans-serif}

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: white; text-decoration: none;}
a:hover {color: #FF0000; text-decoration: overline underline;}
a:active {background-color:#0d82df;}

ul 
{
 list-style-image:url('http://icons.iconseeker.com/png/32/vista-style-sport/golf-ball-   1.png');
}

</style>

这是我的主页网页的.css文件的分配链接!我没有包含其余代码,因为我不相信这是问题所在。我遇到的另一个问题是,当鼠标悬停在它们上方时,我的图像应该在它们周围显示红色边框。这仅适用于Internet Explorer,而不适用于指定的其他2个Web浏览器。我尝试过更改DOCTYPE声明,但没有成功。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\InternetProgramming 2\Assignments\Assignment 2\Assignment 2.css">                       
</head>

感谢您的帮助。请不要建议使用<div>或脚本或任何其他内容,因为作业声明我们不允许使用它。我的知识不是那么好所以请耐心等待!感谢。

这是我的HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<title>Home Page</title>

<head>

<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\Internet Programming 2\Assignments\Assignment 2\Assignment 2.css">
   </head>
<table align = center>
<tr>
<td colspan = "2"><img src = "http://logopond.com/logos/6f9f36e05089d690709ec2ac837ada82.png" width="400" height="344" alt = ""></td>
<td><img src = "http://t3.gstatic.com/images?q=tbn:ANd9GcQiNOQS9CNd9bKW92ZQDw7mh1Qjz-_XUcKRKRlsqB2ln0SyaMMg" width = "400" height = "344" alt = ""</td>
</tr>

<tr>
<td colspan = "3" align = center><h1> Hole In One Club </h1></td> 
</tr>
</table>

<body>
<table align = center>
<tr rowspan = "4">
<td >

    <p>Congratulations on your hole-in-one and welcome to the world of golf’s most prestigious achievers! Do you know that only 4% of golfers ever have the satisfaction of a hole-in-one?</p>

    <p>This is the official page for the hole in one club.</p>

      <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzV8i9tkZv04EgGB4K2MLtVQgKl7B_cLtIanbawul0Dp_iQ0TXEw" width="250" height="200" align = "left" alt=""/>

    <p>We welcome all members and visitors to our website. We are a type of insureance club that offers golfers all around South Africa the oppertunity to "obtain hole in one insurance" 
   for a yearly fee of only <strong>R150</strong></p>

    <p>The odds of a golfer achieving a hole-in-one on any specific hole on any given day are 43 000:1. That makes a hole-in-one golfer a very special and unique person!</p>
 <img src = "http://www.framingedge.ca/images/sports/hole-in-one.jpg" width = "400" height = "200" align = "right"/>

    <p>The Hole In One Club is widely regarded as the most successful and most active society of its kind in South Africa.</p>

   <p>Launched in 2013, the Society has grown steadily over the past year and has 
   rewarded a staggering 500 South African golfers for their unique achievement during this year.</p>

    <p>We offer you with the prize of YOUR choice for every hole in one that you hit! To see all the prizes available please click on the link located to the right of the page.   </p>

</td>

<td valign = top>
    <ul>
        <li><a href = "C:\Users\THETANK\Desktop\page gallery.html"  ><strong>Prize's Gallery</strong></a></li>
        <li><a href = ><strong>Contact Us</strong></a></li>
    </ul>
 </td>

<tr align = center>
<td colspan = "2">
<br>
<br>
    <font size = "6"><strong>Sponsorships:</strong>
</td>
</tr>


<tr align = center>
<td colspan = "2">
    <a href = "http://www.nike.com/us/en_us/c/golf"><img src = "http://www.golf-isc.co.uk/wp-content/uploads/2013/01/9abd755b_nikegolf_logo_2.jpg" width = "200" height = "100"/></a>
    <a href = "http://www.ping.com/"><img src = "http://www.golfpitstop.com.au/Images/Brands/ping.jpg" width = "200" height = "100"/></a>
    <a href = "http://taylormadegolf.com/"><img src = "http://sosgolf.co.za/wp-content/uploads/2013/04/taylormade.jpg" width = "200" height = "100"/></a>
</td>
</tr>


<tr>
<td align = center colspan = "2"><a href = "s212204599@live.nmmu.ac.za" ><strong>  <italics>E-Mail: Andre Smith</italics></strong></a></td>
</tr>
</body>

</table>

</html>

4 个答案:

答案 0 :(得分:1)

问题在这里 -

<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\InternetProgramming 2\Assignments\Assignment 2\Assignment 2.css">

仅使用此功能 -

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

并确保Assignment 2.css和您的html文件位于同一目录

答案 1 :(得分:0)

样式链接的Href属性应该与您的页面相关。 如果你有这样的层次结构:

folder0-> page.html folder0-> folder1-> style.css folder0-> folder2-> script.js

指向样式的链接:<link rel ="stylesheet" type = "text/css" href = "folder1/style.css">

您的人可能是这样的:<link rel ="stylesheet" type = "text/css" href = "Assignment 2.css">

这是jsfiddle,如果您可以正确导入样式,它就可以使用。

答案 2 :(得分:0)

你需要像这样保留图像

<ul>
    <li> <img src=""> </li>
    <li> <img src=""> </li>
</ul>

并为img编写css:像

一样悬停
img:hover {
//display border
}

答案 3 :(得分:0)

您的CSS字体名称不正确,并且您指定了两次“font-family”:

font-family: font-family: Ariel, Halavetica, sans-serif;

应该是

font-family: arial, helvetica, sans-serif;

另一件事是字体继承,因此你只需要在根元素上设置font-family,在这种情况下就是你的“body”标签。

您可能会发现Internet Explorer在其无限智慧中忽略了字体系列选择器的双重规范。

最安全的做法是确保您的CSS按照元素在页面上显示的顺序排序,因此通常最佳做法是按以下顺序排序:

  1. HTML(html)
  2. 身体(身体)
  3. 段落(p)
  4. 标题(h1,h2,h3等)
  5. 主播(a,a:悬停等)
  6. 然后,您可以使用类或选择器覆盖HTML中的特定元素。

    要让图片在IE8,Chrome,FireFox及以上版本中悬停工作:

    body { background-color: navy; color: white; }
    a img { border: 1px solid transparent; }
    a:hover img { border: 1px solid red; }
    

    如下所示:http://jsfiddle.net/khcb4/1/

    我希望这有帮助!