我的页面在IE中工作正常，但在Firefox中无法识别css div [英] My page works fine in IE but css div is not recognised in firefox
问题描述
我对css lark非常陌生，所以我正在努力奋斗。
我设法构建了一个基本的div中心框，其中嵌入了我的html中的css。它在IE中看起来很好但在Firefox中丢失了所有大小。
任何sugestions人。
<！DOCTYPE HTML PUBLIC " - // W3C // DTD HTML 4.01 // EN" http://www.w3.org/TR/REC-html40/strict.dtd">
< html xmlns =" http：//www.w3.org/1999 / xhtml">
< head>
< meta http-equiv =" Content-Type"含量=" text / html的;字符集= UTF-8英寸/>
<！ - TemplateBeginEditable name =" doctitle" - >
< title> Untitled Document< / title>
<！ - TemplateEndEditable - >
< ！ - TemplateBeginEditable name =" head" - >
<！ - TemplateEndEditable - >
< style type =" text / css">
<！ -
身体{
字体：100％Verdana，Arial，Helvetica，sans-serif;
背景：#fff;
保证金：0; / *最好将body元素的边距和填充归零以考虑不同的浏览器默认值* /
padding：0;
text-align：中央; / *这使容器在IE 5 *浏览器中居中。然后将文本设置为#container选择器中左对齐的默认值* /
颜色：＃000000;
}
ul {
list-style-type：none; / *抑制无用元素* /
宽度：100％; / *精确的Opera * /
}
li {float：left;} / *列表左边对齐* /
.menu a {
保证金：0 1px;
宽度：80px;
身高：14px;
float：left;
display：inline;
text-align：center;
border：0px solid grey;
颜色：＃000;
背景：#fff;
字体大小：10px;
}
.menu a：悬停{
背景：#ccc;
border：0px solid grey;
}
.menu a：活跃{
背景：灰色;
border：0px纯灰色;
颜色：#fff;
}
.thrColFixHdr #container {
position：absolute;
剩余：50％;
最高：50％;
宽度：650px;
身高：400px;
margin-top： - 为200px; / *高度的一半* /
margin-left：-325px; / *宽度的一半* /
}
.thrColFixHdr #header {
position：fixed;
背景：#fff; / *此填充匹配显示在其下方的div中元素的左对齐。如果在#header中使用图像而不是文本，则可能需要删除填充。 * /
身高：0px;
宽度：650px;
}
.thrColFixHdr #mainContent {
头寸：固定;
保证金：0; / *此div元素的左右边距在页面的两侧创建两个外部列。无论侧边栏div包含多少内容，列空间都将保留。如果希望#mainContent div的文本在每个侧边栏中的内容结束时填充侧边栏空格，则可以删除此边距。 * /
填充：0; / *记住填充是div框内的空间，边距是div框外的空格* /
高度：330px;
宽度：650px;
溢出：自动;
}
.thrColFixHdr #footer {
仓位：固定;
宽度：700px;
身高：30px;
}
.clearfloat {/ *此类应放在div或break元素上并且应该是一个容器关闭之前的最后一个元素，它应该完全包含一个浮点数* /
clear：both;
height：0;
font-size：1px;
line-height：0px;
}
.style1 {color：#DDDDDD}
.style2 {color：＃000000}
.style3 {
font-size：85％
}
- >
< / style><！ - [if IE 5]>
< style type =" text / css">
/ *在此条件评论中为IE 5 *放置css框模型修复* /
.thrColFixHdr #sidebar1 {width：180px; }
.thrColFixHdr #sidebar2 {width：190px; }
< / style>
<！[endif] - ><！ - [if IE]>
< style type =" text / css">
/ *在这个条件评论中对所有版本的IE进行css修复* /
.thrColFixHdr＃sidebar2，.thrColFixHdr #sidebar1 {padding-top：30px; }
.thrColFixHdr #mainContent {zoom：1; }
/ *上面的专有缩放属性为IE提供了需要避免几个bug的hasLayout * /
< / style>
< ; [endif] - >< / head>
< body class =" thrColFixHdr">
< ; div id =" container">
< div id =" header">
< ul class =" menu">< li>< a href =" /home.html"> Home< / a>< / li> < li>< a href =" /about.html">关于< / a>< / li> < li>< a href =" /portfolio.html">投资组合< / a>< / li> < li>< a href =" /crafts.html"> Crafts< / a>< / li> < li>< a href =" /photography.html">摄影< / a>< / li> < li>< a href =" /class.html"> Classes< / a>< / li> < li>< a href =" /contact.html">联系< / a>< / li>< / ul>
< h1 class =" style3" >< / h1>
<！ - end #header - >
< / div>
< div id =" mainContent">
< h1>主要内容< / h1>
< p>& nbsp;< / p>
< / div>
< ; div id =" footer">< span class =" style2">< strong> Miriana D''ambrosio< / strong>< / span>艺术家设计师导师
<！ - end #footer - >
< / div>
<！ - end #container - >< / div>
< / body>
< / html>
Im very new to the who css lark so am struggling quite a bit.
ive managed to build a basic div centred box with css embedded in my html. It looks fine in IE but loses all size in firefox.
Any sugestions guys.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it''s good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}
li { float: left;} /* lists aligned to the left */
.menu a {
margin: 0 1px;
width: 80px;
height: 14px;
float: left;
display: inline;
text-align: center;
border: 0px solid gray;
color: #000;
background: #fff;
font-size: 10px;
}
.menu a:hover {
background: #ccc;
border: 0px solid gray;
}
.menu a:active {
background: gray;
border: 0px solid gray;
color: #fff;
}
.thrColFixHdr #container {
position:absolute;
left: 50%;
top: 50%;
width: 650px;
height: 400px;
margin-top: -200px; /* half of the height */
margin-left: -325px; /* half of the width */
}
.thrColFixHdr #header {
position:fixed;
background: #fff; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
height: 0px;
width:650px;
}
.thrColFixHdr #mainContent {
position: fixed;
margin: 0; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div''s text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
height: 330px;
width: 650px;
overflow: auto;
}
.thrColFixHdr #footer {
position:fixed;
width: 700px;
height: 30px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style1 {color: #DDDDDD}
.style2 {color: #000000}
.style3 {
font-size: 85%
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
<h1 class="style3"></h1>
<!-- end #header -->
</div>
<div id="mainContent">
<h1> Main Content </h1>
<p> </p>
</div>
<div id="footer"><span class="style2"><strong>Miriana D''ambrosio</strong></span> Artist Designer Tutor
<!-- end #footer -->
</div>
<!-- end #container --></div>
</body>
</html>
推荐答案
当我浏览你的页面时，我正在编辑这个：
1）你的doctype不正确。应该是：
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3。 org / TR / html4 / strict.dtd">
2）你声明HTML但是你使用这个Xhtml标签：
< html xmlns = http：//www.w3.org/1999/xhtml">
将所有内容改为< html>
3）你也使用Xhtml结束标记，/>。删除斜杠。
I''m editing this as I go through your page:
1) Your doctype is incorrect. Should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2) You declare HTML but then you use this Xhtml tag:
<html xmlns="http://www.w3.org/1999/xhtml">
Change that all to just <html>
3) You are also using Xhtml end tag, />. Remove the slash.
4）您正在使用''position：fixed''，它在IE6中不起作用，但已针对IE7进行了修复。如果您在IE7中查看过此内容，您会看到它与Firefox相同。
考虑到4），您可能想重新考虑一下您要做什么。
4) You are using ''position:fixed'' which does not work in IE6 but has been fixed for IE7. If you viewed this in IE7, you will see that it appears the same as Firefox.
With 4) in mind, you might want to re-think what you are trying to do.
我在浏览你的页面时正在编辑这个：
1）您的doctype不正确。应该是：
<！DOCTYPE html PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3。 org / TR / html4 / strict.dtd">
2）你声明HTML但是你使用这个Xhtml标签：
< html xmlns = http：//www.w3.org/1999/xhtml">
将所有内容改为< html>
3）你也使用Xhtml结束标记，/>。删除斜线。
I''m editing this as I go through your page:
1) Your doctype is incorrect. Should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2) You declare HTML but then you use this Xhtml tag:
<html xmlns="http://www.w3.org/1999/xhtml">
Change that all to just <html>
3) You are also using Xhtml end tag, />. Remove the slash.
感谢您的帮助！
Rite ive chaged my doc type。
我已经摆脱了< html xmlns =" http：//www.w3.org/1999/xhtml">标签和/。但我不确定应该取而代之的是什么。
似乎现在它既不显示div也不显示火狐？！？！？
Thanks for the help!
Rite ive chaged my doc type.
ive got rid of the <html xmlns="http://www.w3.org/1999/xhtml"> tag and the /. But im unsure what should be in its place.
it seems that now it neither is displaying the div in either ie or firefox?!?!
这篇关于我的页面在IE中工作正常，但在Firefox中无法识别css div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
