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

标签 html css wordpress internet-explorer

网站 jgimprinters.com在 Chrome 中加载和工作正常,但在 IE 或 Firefox 中不正常。 我已验证 IE 下载样式表,但它并没有应用很多样式。 例如,在 IE 中,应该以全尺寸隐藏的菜单按钮正在显示并且全部被炸毁(太大),菜单样式都不起作用,一些东西的背景颜色不起作用。尽管 IE 可以看到样式表,但它并未应用样式。

如有任何帮助,我们将不胜感激。

谢谢

编辑:无效的片段 - 对于初学者来说,有整个导航 - 导航下方的标题丢失

#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 忽略了。

看起来像: IE screenshot

应该看起来像: enter image description here

最佳答案

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

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

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

我是怎么知道的?

我在 my favorite editor 中打开了样式表并注意到在第 385 行之后一切都是黄色的——这是字符串的颜色。

Sublime screenshot

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

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

关于html - CSS 不适用于 IE 和 Firefox,但适用于 Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28885771/

相关文章:

jquery - 使用显示更少/更多选项截断多行 HTML 绑定(bind)

html - 非英语人士的编程资源

wordpress - 为什么 Google 不显示我的 WordPress 网站的准确元描述?

php - 按姓氏排序不适用于像 O'Brien 和 O'Koren 这样的名字

javascript - 无法返回 HTML 元素的 css 属性

php - 本地 WordPress 安装的最大上传大小限制为 10 MB

Php 包含带有指向 css 的链接的头部不起作用

html - 如果元素的文本内容太长,如何在布局网格中强制换行?

javascript - 最大下拉列表选项的最佳经验法则是什么

javascript - 为什么只有一个 JavaScript 函数执行 onClick?