在IE中的鏈接有奇怪的行爲

Question

在我的網頁的頂部我有一些文本鏈接的CSS格式。在Chrome和Firefox中，它們的行爲是正確的;在IE中當每個鏈接被點擊時，格式改變並且文本鏈接稍微變大;將鏈接移到右側。如果你點擊幾個鏈接，最後一個鏈接會被放到下一行。 這是一個問題的鏈接。 http://riverswest.com/dl/riverswest-site/index.html

這裏是CSS代碼！鏈接從#topnav開始並結束於：＃bottom-nav-left 謝謝！

/* Color and Font Legend 

font-family: 'Open Sans Condensed', sans-serif; 
font-family: 'Open Sans', sans-serif; 
font-family: 'Source Sans Pro', sans-serif; 

font-family: 'PT Sans', sans-serif; 
font-family: 'PT Sans Narrow', sans-serif; 
font-family: 'PT Serif', serif; 

font-family: 'Droid Sans', sans-serif; 
font-family: 'Droid Sans Mono', sans-serif; 
font-family: 'Droid Serif', serif; 

*/ 


/* Reset */ 

html, body { margin: 0; padding: 0; border: 0; 
      background: transparent; font-size:10px; } 

div, span, article, aside, footer, header, hgroup, nav, section, 
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead { 
margin: 0; 
padding: 0; 
border: 0; 
vertical-align: baseline; 
background: transparent; 
} 

img  { margin:0; padding:0; border:0; } 

table, tr, th, td, tbody, tfoot, thead { 
margin: 0; padding: 0; border: 0; 
vertical-align: baseline; 
background: transparent; 
} 

table { border-collapse: collapse; border-spacing: 0; } 

input, select, textarea, form, fieldset { 
margin: 0; padding: 0; border: 0; 
} 

blockquote, q { quotes: none; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section  

{ display:block; } 

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
font-family: Arial, Helvetica, sans-serif; 
font-size:100%; 
font-weight: normal; 
font-style: normal; 
line-height: 100%; 
text-indent: 0; 
text-decoration: none; 
text-align: left; 
color: #000; 
} 

ol, ul, li { list-style: none; } 

img   { max-width:100%; } 


/* Global */ 

html { } 
body  { background-color:#000; 
     -webkit-font-smoothing: antialiased; 
     -webkit-text-size-adjust: 100%; } 



/* Headings */ 

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #FFF; } 

h1 { font-size:24px; padding-bottom: 5px; color:#FFF; font-style:italic; 
     border-bottom:1px #FFF solid; margin:5px 0px 0px 15px;} 
h2 { font-size:20px; } 
h3 { font-size:16px; } 
h4 { font-size:14px; } 
h5 { font-size:14px; } 
h6 { font-size:14px; } 

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } 



/* Text Elements */ 

p, li, a  { font-family:'Source Sans Pro', Arial, Helvetica, sans-serif; } 

p    { color:#FFF; font-size:12px; line-height:150%; margin:15px 0; } 
p .left  { margin: 1.5em 1.5em 1.5em 0; padding: 0; } 
p .right  { margin: 1.5em 0 1.5em 1.5em; padding: 0; } 

a    { font-size:11px; font-weight:bold; } 
a:link   { font-size:11px; font-weight:bold; } 
a:visited  { font-size:11px; font-weight:bold; } 
a:active  { font-size:11px; font-weight:bold; } 
a:focus   { font-size:11px; font-weight:bold; } 
a:hover   { font-size:11px; font-weight:bold; } 

blockquote  { color:#000; font-size:12px; } 

strong   { font-weight: bold; } 
em   { font-style: italic; } 

/* Images */ 


.image-frame { padding:0px; border:1px #666 solid; margin:0px 0px 0px 48px; } 


/* Lists */ 

ul li  { color:#000; font-size:12px; } 
ol li  { color:#000; font-size:12px; } 

li   { } 

ul.square { list-style: square outside; } 
ul.circle { list-style: circle outside; } 
ul.disc  { list-style: disc outside; } 

ul   { list-style: none outside; } 
ol   { list-style: decimal; } 

dl    { } 
dt    { } 
dd    { } 



/* Tables */ 

table   { width:100%; } 

tr   { } 
.odd   { background-color:#eee; } 
.even  { background-color:#fff; } 

th    { font-weight: bold; } 
thead, th  { background: #ccc; } 

tbody  { } 

th,td,caption { } 
caption   { } 

tfoot   { } 
.tfooter  { background-color:#ccc; text-align:center; font-style:italic; } 

caption   { background: #efefef; } 



/* Miscellaneous */ 

sup, sub  { line-height: 0; } 

abbr, acronym { border-bottom: 1px dotted #666; } 
address   { } 
del    { background:#FFCECE; color:#f00; } 

code, pre  { background-color:#FF9; padding:2px 0px; margin:4px 25px; 
       font-family:"Courier New", Courier, monospace;     
      font-size:12px; font-weight:normal; line-height:150%; } 

/* Containers */ 

#outer    { width:960px; margin:0 auto; background-color:#000; } 

#wrapper   { width:900px; margin:0 auto; background-color:#000; } 

#logo    { margin:30px 0px 10px 0; float:left; } 

#social-media  { float:right; } 
#social-media ul { margin:30px 0px 0px 0px; } 
#social-media ul li { float:right; } 
#social-media img { } 

#topnav    { clear:both; } 
#topnav ul   { border-top:1px #FFF solid; border-bottom: 1px #FFF solid; 
        margin:10px 0; padding:10px 0 } 
#topnav ul li  { display:inline; } 
#topnav ul li a  { padding:0 15px; } 

#topnav a:link  { color:#F60; font-size:11px; font-weight:bold;} 
#topnav a:visited { color:#F60; font-size:11px; font-weight:bold;} 
#topnav a:active { color:#9C0; font-size:11px; font-weight:bold;} 
#topnav a:focus  { color:#9C0; font-size:11px; font-weight:bold;} 
#topnav a:hover  { color:#9C0; font-size:11px; font-weight:bold;} 


#banner    { margin-bottom:30px; } 
#slider    { margin-bottomp:30px; } 
/* LOWER NAVIGATION */ 


#bottom-nav-left   {float:left; } 
#bottom-nav-left ul   { margin:0px 0; padding:7px 0 } 
#bottom-nav-left ul li  { display:inline; } 
#bottom-nav-left ul li a  { padding:0 10px; } 

#bottom-nav-left a:link  { color:#9C0; font-size:11px; font-weight:bold;} 
#bottom-nav-left a:visited { color:#9C0; font-size:11px; font-weight:bold;} 
#bottom-nav-left a:active { color:#F60; font-size:11px; font-weight:bold;} 
#bottom-nav-left a:focus { color:#F60; font-size:11px; font-weight:bold;} 
#bottom-nav-left a:hover { color:#F60; font-size:11px; font-weight:bold;} 


/* LOWER NAVIGATION SPLIT */ 


#bottom-nav-right   {float:right; } 
#bottom-nav-right ul   { margin:0px 0; padding:7px 0 } 
#bottom-nav-right ul li  { display:inline; } 
#bottom-nav-right ul li a  { padding:0 10px; } 

#bottom-nav-right a:link { color:#9C0; font-size:11px; font-weight:bold;} 
#bottom-nav-right a:visited { color:#9C0; font-size:11px; font-weight:bold;} 
#bottom-nav-right a:active { color:#F60; font-size:11px; font-weight:bold;} 
#bottom-nav-right a:focus { color:#F60; font-size:11px; font-weight:bold;} 
#bottom-nav-right a:hover { color:#F60; font-size:11px; font-weight:bold;} 

#bottom-nav-border { clear:both; border-bottom:1px #fff solid; margin:10px 0 0 0;} 



#content-wrapper { } 

#leftnav   { } 
#leftnav h2  { } 
#leftnav h3  { } 
#leftnav p  { } 
#leftnav img  { } 
#leftnav li  { } 
#leftnav a  { } 

#leftnav a:link  { color:#000; } 
#leftnav a:visited  { color:#000; } 
#leftnav a:active  { color:#000; } 
#leftnav a:hover  { color:#000; } 
#leftnav a:focus  { color:#000; } 

#leftside  { } 
#leftside h2  { } 
#leftside h3  { } 
#leftside p  { } 
#leftside img  { } 
#leftside li  { } 
#leftside a  { } 

#rightside  { } 
#rightside h2  { } 
#rightside h3  { } 
#rightside p  { } 
#rightside img  { } 
#rightside li  { } 
#rightside a  { } 

#rightside a:link  { color:#000; } 
#rightside a:visited { color:#000; } 
#rightside a:active  { color:#000; } 
#rightside a:hover  { color:#000; } 
#rightside a:focus  { color:#000; } 




#content   { clear:both; width:900px; } 

#content h1   { } 
#content h2   { } 
#content h3   { } 
#content p   { font-weight:normal; } 
#content img  { } 
#content li   { } 
#content a   { } 



#content a:link   { color:#000; } 
#content a:visited  { color:#000; } 
#content a:active  { color:#000; } 
#content a:hover  { color:#000; } 
#content a:focus  { color:#000; } 
#border-bottom   { border-bottom:1px #FFF solid; margin:0 15px 0 

15px; } 

#lower-content   { } 
#lower-content img  { margin:20px 0px 0px 33px; border:1px #966 solid;} 


#gallery   { } 

#team   { } 

#faq    { } 

#events   { } 

#bottom-banner  { } 

#footer    { clear:both; margin-top:20px ; border-top:1px #FFF solid;  

padding-bottom:20px; } 


#footer p   { } 

#footer a:link   { color:#000; } 
#footer a:visited  { color:#000; } 
#footer a:active  { color:#000; } 
#footer a:hover   { color:#000; } 
#footer a:focus   { color:#000; } 


#box1 { } 

#box2 { } 

#box3 { } 

#box4 { } 

#box5 { } 

#box6 { } 

#box7 { } 

#box8 { } 

#box9 { } 


/* Hide Print Headings */ 

#print-header  { display:none; } 
#print-header h1 { display:none; } 
#print-header h2 { display:none; } 
#print-header h3 { display:none; } 
#print-header p  { display:none; } 

#print-footer  { display:none; } 
#print-footer h4 { display:none; } 

/* Hide Skip Links For Visually Impaired Screen Reader Users */ 

#skip { display:none; } 


/* Layout Extra */ 




/* Navigation Extra */ 



/* Forms */ 

#form1     { margin:0 0 0 0; } 

ol li     { display:block; padding:20px 0px 5px 0px; 

} 

form ol     { list-style-type:none; } 

label     { display: block; margin:10px 0 8px 0; 
         font-family:Arial, Helvetica, sans-  

serif; font-size:14px; 
         text-transform:uppercase; } 

input, textarea, select   { display: block; width:400px; 
         pading:5px; } 

input     { } 

textarea     { height:150px; } 

select     { } 

.submit     { padding:5px 20px; width:140px; } 


/* Miscellaneous */ 
.center-text { font-size:18px; font-style:italic; color:#9C0; text-align:center; } 
.copyright-text { font-size:10px; font-style:italic; color:#333; } 
.footer-text { font-size:12px; font-style:normal; color:#FFF; text-align:center; 

} 

.title   { font-size:18px; font-weight:bold; color:#333; } 
.subtitle   { font-size:14px; font-style:italic; color:#333; } 

.artist   { font-size:16px; font-weight:bold; color:#333; } 
.author   { font-size:14px font-weight:bold; color:#555; } 
.editor   { font-size:14px font-style:italic; color:#555; } 

.pub-date   { font-size:10px font-style:italic; color:#555; } 
.article-date  { font-size:10px font-style:italic; color:#555; } 
.location   { font-size:10px font-style:italic; color:#555; } 

.address   { font-size:10px; font-style:normal; color:#000; } 
.city   { font-size:10px; font-style:normal; color:#000; } 
.telephone  { font-size:10px; font-style:normal; color:#000; } 
.email   { font-size:10px; font-style:normal; color:#000; } 
.website   { font-size:10px; font-style:normal; color:#000; } 

.float-right  { float:right; } 
.float-left  { float:left; } 
.clear   { clear:both; } 

.left   { text-align:left; } 
.center   { text-align:center; } 
.right   { text-align:right; } 

.hide   { display:none; } 
.block   { display:block; } 
.inline   { display:inline; } 
.inline-block  { display:inline-block; } 
.inline-table  { display:inline-table; } 

.first   { font-weight:bold; } 
.last   { font-weight:bold; } 
.left   { font-weight:bold; text-align:left; } 
.right   { font-weight:bold; text-align:right; } 

.added    { background:#D7D7FF; } 
.removed   { background:#FFCECE; color:#f00; } 
.changed   { background:#FFB; } 

.red-bg   { background-color:#900; background- 

image:url(../images/bg/red.fw.png); background-repeat:repeat-x; } 
.yellow-bg  { background-color:#E6E600; background- 

image:url(../images/bg/yellow.fw.png); background-repeat:repeat-x; } 
.orange-bg  { background-color:#F96; background- 

image:url(../images/bg/orange.fw.png); background-repeat:repeat-x; } 
.green-bg   { background-color:#393; background- 

image:url(../images/bg/green.fw.png); background-repeat:repeat-x; } 
.blue-bg   { background-color:#36F; background- 

image:url(../images/bg/blue.fw.png); background-repeat:repeat-x; } 
.purple-bg  { background-color:#66F; background- 

image:url(../images/bg/purple.fw.png); background-repeat:repeat-x; } 

.red-txt  { color:#994D4D; } 
.yellow-txt  { color:#FF0; } 
.orange-txt  { color:#F90; } 
.green-txt  { color:#0F0 } 
.blue-txt  { color:#00A5F4; } 
.purple-txt  { color:#93F; } 



/* Success, info, notice and error/alert boxes - from Blueprint CSS Framework */ 

.error, .alert, .notice, .success, .info { 
padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; } 

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; } 

.notice  { background: #fff6bf; color: #514721; border-color: #ffd324; } 

.success { background: #e6efc2; color: #264409; border-color: #c6d880; } 

.info  { background: #d5edf8; color: #205791; border-color: #92cae4; } 

.error a  { color: #8a1f11; } 
.alert a  { color: #8a1f11; } 

.notice a  { color: #514721; } 
.success a  { color: #264409; } 
.info a  { color: #205791; } 

Answer 1

這個CSS添加到您的styles.css文件：

#topnav a:visited { 
    font-weight:bold 
} 

出於某種原因，默認樣式上a與font-weight:bold沒有級聯在IE中。作爲一般技巧，您可能想要使用更多的類而不是樣式元素。它最終導致了奇怪的錯誤，因爲CSS被應用到你想要的元素上，但是由於範圍如此之大，所以也是非預期的元素。我將#topnav添加到新的CSS中，因此範圍將僅限於該部分中的鏈接。