網頁只能在IE中正確顯示，而不能在Chrome和Firefox中正確顯示

Question

這是我的.css文件。 （請記住，我是IT大二學生，正在學習Web Design 1！）：

<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>

Answer 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文件在同一目錄中

Answer 2

樣式鏈接的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 ，如果您可以正確導入樣式，它就可以工作。

Answer 3

你需要保持這樣的形象

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

並為img：hover編寫CSS

img:hover {
//display border
}

Answer 4

您的CSS字體名稱不正確，並且兩次指定了“ font-family”：

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

應該

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

另一件事是字體繼承，因此您只需要在根元素（在本例中為“ body”標簽）上設置字體系列。

您可能會發現Internet Explorer以其無窮的智慧忽略了字體家族選擇器的雙重規范。

最安全的方法是確保CSS的排列順序與元素在頁面上顯示的順序相同，因此通常最佳做法是按以下順序進行排序：

HTML（html）
身體（身體）
段落（p）
標題（h1，h2，h3等）
錨點（a，a：懸停等）

然后，您可以使用類或選擇器覆蓋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/

我希望這有幫助！

網頁只能在IE中正確顯示，而不能在Chrome和Firefox中正確顯示

問題描述

4 個解決方案

解決方案1
1 已采納 2013-04-30 09:15:58

解決方案2
0 2013-04-30 09:12:00

解決方案3
0 2013-04-30 09:17:35

解決方案4
0 2013-04-30 09:23:41

網頁只能在IE中正確顯示，而不能在Chrome和Firefox中正確顯示

問題描述

4 個解決方案

解決方案1 1 已采納 2013-04-30 09:15:58

解決方案2 0 2013-04-30 09:12:00

解決方案3 0 2013-04-30 09:17:35

解決方案4 0 2013-04-30 09:23:41

解決方案1
1 已采納 2013-04-30 09:15:58

解決方案2
0 2013-04-30 09:12:00

解決方案3
0 2013-04-30 09:17:35

解決方案4
0 2013-04-30 09:23:41