IE中的链接有奇怪的行为

时间:2013-01-31 21:25:42

标签: css

在我的网页顶部,我有一些由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; }

1 个答案:

答案 0 :(得分:0)

将此CSS添加到styles.css文件中:

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

出于某种原因,a font-weight:bold上的默认样式未在IE中级联。作为一般提示,您可能希望使用更多类而不是样式元素。它最终导致奇怪的错误,因为CSS应用于您的预期元素,但也是非预期的元素,因为范围是如此之大。我将#topnav添加到新CSS中,因此范围仅限于该部分中的链接。