IE7中的文本颜色正确，但IE8中没有 [英] Text color correct in IE7 but not in IE8
本文介绍了IE7中的文本颜色正确，但IE8中没有的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨我在我的一个网站上有一个临时页面，其中有一个网站导航栏，可以在IE7中正确呈现链接文本为白色。在IE8中它是黑色的 - 我尝试使用兼容模式的Body颜色并没有区别。另一个区别是页面颜色仅扩展到IE7中的当前内容，但填充IE8中的视口。
在Firefox中，第一个链接为白色，其余为黑色。在所有三种浏览器中，文本显示悬停下划线，即使我将文本修饰设置为"无"。在样式表中。
页面验证为XHTML Strict。页面网址为： www.camberseaside.co.uk/geoff1.html 我的代码是：
/ *此规则重置一组核心元素，以便它们在浏览器中显示一致。
如果没有此规则，使用h1标签设置样式的内容将出现在Firefox
和Internet Explorer中的不同位置，因为每个浏览器都有不同的上边距默认值。
通过将这些值重置为0，元素最初将以相同的方式呈现，并且设计者可以在任何后续规则中轻松定义
属性。 * /
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6 {
margin：0;
填充：0;
border：0;
outline：0;
字体大小：100％;
}
/ *正文是最外层的布局组件，包含可见的页面内容。设置body元素
的属性将有助于创建页面内容的一致样式和更易于管理的CSS。除了使用body元素设置
全局属性外，通常使用body元素设置页面的背景颜色并为页面创建一个居中的容器
要显示的内容。 * /
body {
background-color：＃c0c0c0;
line-height：14px;
字体大小：11px;
颜色：＃2c2d2e;
font-family：Georgia，"Times New Roman"，Times，serif;
text-align：center; / *在IE 5浏览器中居中页面内容容器。 * /
保证金：20px 0px 0px 0px; / *使用简写表示法（top，right，bottom，left）设置元素的margin属性* /
padding：0 0 0 0; / *使用简写表示法（top，right，bottom，left）设置元素的填充属性* /
font-weight：normal;
}
img {border：1px; color：#ffffff}
.floatright {
float：right;
}
.clearight {
clear：right;
}
.floatleft {
float：left;
clear：left;
}
.clearleft {
clear：left;
}
/ *通常用于设置页面标题样式。 * /
h1 {
line-height：28px;
颜色：＃777890;
字体大小：28px;
font-weight：bold;
}
.h1pagetitle {
text-align：center;
头寸：相对;
左：0px;上：30px
}
/ *通常用于设置章节标题的样式。 * /
h2 {
line-height：14px;
颜色：＃777890;
字体大小：12px;
font-weight：bold;
}
/ *设置未访问链接的样式。 * /
a，a：link {
color：＃5456ef;
font-weight：bold;
text-decoration：none;
}
/ *设置访问过的链接的样式。 * /
a：已访问{
颜色：＃50516b;
font-weight：bold;
text-decoration：none;
}
/ *设置鼠标悬停时链接的样式。 * /
a：悬停{
颜色：＃3a32c4;
text-decoration：underline;
}
/ *设置具有焦点的链接的样式。 * /
a：焦点{
颜色：＃3a32c4;
}
/ *设置正在激活/点击的链接的样式。 * /
a：有效{
颜色：＃383644;
}
/ *这是页面内容的容器。通常使用容器来约束页面内容的宽度
并允许浏览器镶边以避免需要水平滚动。对于固定布局，您可以指定容器宽度
并使用auto作为左右边距以使容器在页面上居中。 IE 5浏览器需要使用text-align：center
由body元素定义以使容器居中。对于液体布局，您只需将左右边距设置为页面上
容器的中心。 * /
#outerWrapper {
background-color：#fff;
宽度：92em;
text-align：left; / *重新定义body元素定义的文本对齐方式。 * /
保证金：0自动0自动; / *使用简写表示法（top，right，bottom，left）设置元素的margin属性* /
}
#outerWrapper #header {
background-color：＃9ea3aa;
line-height：15px;
字体大小：18px;
填充：5px 5px 5px 5px; / *使用简写表示法（top，right，bottom，left）设置元素的填充属性* /
font-weight：bold;
border-bottom：solid 1px＃767a7f; / *使用简写表示法设置元素的底部边框属性* /
}
#outerWrapper #header h1 {
line-height：28px;
颜色：#fff;
字体大小：xx-large;
font-weight：bold;
}
#outerWrapper #header h2 {
line-height：14px;
颜色：＃000;
字体大小：12px;
font-weight：bold;
}
#outerWrapper #header a，#outerWrapper #header a：link {
color：#FFFFFF;
font-weight：normal;
text-decoration：none;
}
#outerWrapper #header a：已访问{
颜色：＃000;
font-weight：bold;
text-decoration：none;
}
#outerWrapper #header a：悬停{
颜色：＃000;
text-decoration：underline;
}
#outerWrapper #header a：focus {
color：＃000;
}
#outerWrapper #header a：active {
color：＃000;
}
/ *包含主页面内容。使用多列列布局时，边距将设置为浮动列的宽度，边距和填充的
。 * /
#outerWrapper #contentWrapper #content {
padding：10px 10px 10px 10px; / *使用简写表示法（top，right，bottom，left）设置元素的填充属性* /
}
#outerWrapper #footer {
text-align：center;
background-color：＃f4f2fc;
border-top：solid 1px＃9ea3aa; / *使用简写表示法设置元素的顶部边框属性* /
填充：10px 10px 10px 10px; / *使用简写表示法（顶部，右侧，底部，左侧）设置元素的填充属性* /
}
/ * navigation * /
.navbar {
position：relative;
left：5px; top：50px;
text-decoration：none;
}
ul＃navlist
{
margin-left：0 ;
padding-left：0;
white-space：nowrap;
text-decoration：none;
}
#navlist li
{
display：inline;
list-style-type：none;
text-decoration：none;
}
#navlist a {padding：3px 10px; }
#navlist a：link，＃navlist a：visited
{
color：#fff;
background-color：＃036;
text-decoration：none;
}
#navlist a：悬停
{
颜色：＃ FFF;
background-color：＃369;
text-decoration：none;
}
我正在使用CSS Sculptor但导航代码已添加到样式表中。
解决方案
Geoff，
所有你看到的是黑色访问过的链接颜色。在Firefox中你只访问过主页，在IE8中你可能已经看过它们了。
以下风格需要从黑色变为白色，从粗体变为普通。
/> #externalWrapper #header a：已访问{
颜色：＃000;
字体粗细：粗体;
文字装饰：无;
HTH
左右的MS MVP表达
Hi
I have a temporary page on one of my websites that has a site navigation bar that renders correctly in IE7 the link text is white. In IE8 it's black -the Body colour I have tried using Compatibility mode and that makes no difference. Another difference is that the page color only extends as far as the present content in IE7 but fills the viewport in IE8.
In Firefox the first link is white and the rest are black. In all three browsers the text shows Underline on Hover even though I have text decoration set to "none" in the stylesheet.
The page validates as XHTML Strict. The page URL is: www.camberseaside.co.uk/geoff1.html My code is:
/* This rule resets a core set of elements so that they will appear consistent across browsers.
Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox
and Internet Explorer because each browser has a different top margin default value.
By resetting these values to 0, the elements will initially be rendered in an identical fashion and their
properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element
will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set
global properties, it is common to use the body element to set the background color of the page and create a centered container
for the page content to display. */
body {
background-color: #c0c0c0;
line-height: 14px;
font-size: 11px;
color: #2c2d2e;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center; /* Centers the page content container in IE 5 browsers. */
margin: 20px 0px 0px 0px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
font-weight: normal;
}
img {border: 1px;color: #ffffff}
.floatright {
float: right;
}
.clearight {
clear: right;
}
.floatleft {
float:left;
clear: left;
}
.clearleft {
clear:left;
}
/* Commonly used to style page titles. */
h1 {
line-height: 28px;
color: #777890;
font-size: 28px;
font-weight: bold;
}
.h1pagetitle{
text-align:center;
position:relative;
left:0px;top:30px
}
/* Commonly used to style section titles. */
h2 {
line-height: 14px;
color: #777890;
font-size: 12px;
font-weight: bold;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #5456ef;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #50516b;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #3a32c4;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #3a32c4;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #383644;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content
and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width
and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center
defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the
container on the page. */
#outerWrapper {
background-color: #fff;
width: 92em;
text-align: left; /* Redefines the text alignment defined by the body element. */
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #header {
background-color: #9ea3aa;
line-height: 15px;
font-size: 18px;
padding: 5px 5px 5px 5px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
font-weight: bold;
border-bottom: solid 1px #767a7f; /* Sets the bottom border properties for an element using shorthand notation */
}
#outerWrapper #header h1 {
line-height: 28px;
color: #fff;
font-size: xx-large;
font-weight: bold;
}
#outerWrapper #header h2 {
line-height: 14px;
color: #000;
font-size: 12px;
font-weight: bold;
}
#outerWrapper #header a, #outerWrapper #header a:link {
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
}
#outerWrapper #header a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
#outerWrapper #header a:hover {
color: #000;
text-decoration: underline;
}
#outerWrapper #header a:focus {
color: #000;
}
#outerWrapper #header a:active {
color: #000;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for
the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #footer {
text-align:center;
background-color: #f4f2fc;
border-top: solid 1px #9ea3aa; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
/* navigation */
.navbar {
position:relative;
left:5px;top:50px;
text-decoration:none;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
text-decoration:none;
}
#navlist li
{
display: inline;
list-style-type: none;
text-decoration:none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
I am using CSS Sculptor but the navigation code was added to the stylesheet.
解决方案
Geoff,
All you are seeing is the black visited link colour. In Firefox you've only visted the home page, in IE8 you've probably visted them all.
The following style needs changing from black to white and from bold to normal.
#outerWrapper #header a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
HTH
Ian
MS MVP Expression
这篇关于IE7中的文本颜色正确，但IE8中没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
