CSS 不适用于 IE 和 Firefox,但适用于 Chrome

Posted

技术标签:

【中文标题】CSS 不适用于 IE 和 Firefox,但适用于 Chrome【英文标题】:CSS not working with IE and Firefox, but works in Chrome 【发布时间】:2015-05-07 06:57:20 【问题描述】:

Site jgimprinters.com 在 Chrome 中加载并运行良好,但在 IE 或 Firefox 中则不行。 我已经验证 IE 下载了样式表,但是它并没有应用很多样式。 例如,在 IE 中,应该以全尺寸隐藏的菜单按钮正在显示并且全部爆炸(太大),菜单样式都不起作用,一些东西的背景颜色不起作用。虽然 IE 可以看到样式表,但它并没有应用样式。

任何帮助将不胜感激。

谢谢

编辑:sn-ps 不起作用 - 对于初学者来说,有整个导航 - 并且导航下方缺少标题

#nav-wrapper
	max-width:900px;
	margin:0 auto;

#nav
	list-style:none;
	

#nav li
	float:left;

#nav li a
	webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
padding: 0 17px;
margin: 0 auto;
position: relative;
display: block;
height: 30px;
cursor: pointer;
text-decoration: none;
color: #FFFFFF;
line-height: 30px;
text-align: center;
font-size:12px;
font-weight:bold;


#nav li a.active, #nav li a.better-active
	background: #EDEDED;
	color: #5D5F5D;

#nav li a:hover
	background:#5D5F5D;
	color:#ffffff;

#menu-button
	display:none;
	width:36px;
	cursor:pointer;

#menu-button img
	margin:0px;

#head-wrapper
	height:150px;
	background:url('/wp-content/uploads/2015/02/header.png') no-repeat;
	background-position:center;
	width:100%;
	display:block;
	

#head-inner
	width:100%;
	max-width:900px;
	margin:0 auto;


#logo
	margin-left:30px;
	float:left;

#head-right
	float:right;
	width:270px;
	margin-top:30px;
	margin-right:15px;

#callout
	font-size: 14px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: none;
font-variant: normal;
text-align: left;
color: #ED1D2E !important;
width:280px;


#phone
	font-size: 30px;
font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-align: left;
vertical-align: middle;
color: #000000 !important;
text-decoration:none;

IE 和 Firefox 几乎忽略了所有这些。

看起来像:

应该看起来像:

【问题讨论】:

你能发布你的 CSS sn-ps 假设正在渲染吗?还有 IE 的截图? 您的源代码中存在可能导致此问题的错误。请检查使用validator.w3.org 并修复它们(尤其是那些关于未关闭标签的) 验证错误已处理,仍然存在这些问题 @chris 不是 CSS 中的那些——请参阅我的回答 ;-) 【参考方案1】:

您的 styles.css 文件第 385 行存在语法错误,Chrome 似乎已为您解决此问题,而其他浏览器则没有。

… url(/wp-content/uploads/2015/02/nav.png') …

有一个未打开的结束撇号。之后的所有 CSS 都不会被解析。

我是怎么知道的?

我在my favorite editor 中打开样式表,注意到在第 385 行之后所有的东西都是黄色的——这是字符串的颜色。

但是,验证 CSS 也会有所帮助,因为它还发现了错误(以及其他错误):

386 #main-nav   Value Error : background top is not a color value ) no-repeat, …

【讨论】:

那个微妙的崇高广告。哈哈,但这很可能是这样做的。我也用 sublime 看到同样的东西。

以上是关于CSS 不适用于 IE 和 Firefox,但适用于 Chrome的主要内容,如果未能解决你的问题,请参考以下文章

CSS 适用于 FF 和 IE,但不适用于 Chrome

innerHTML 适用于 IE 和 Firefox,但不适用于 Chrome

谷歌翻译不适用于任何 IE,但适用于 Firefox 和 Google Chrome

JavaScript 时钟适用于 Chrome,但不适用于 Firefox 或 IE

Class:hover 适用于 Firefox,但不适用于 Chrome 和 IE9

Div 100% 高度适用于 Firefox,但不适用于 IE