Ram*_*sad 11 html css html5 css3
1)Css样式没有正确应用到我的HTML页面,如果我在html上添加特定版本,如HTML5,HTML4.1严格等,如果我删除所有DOCTYPE语句,它工作正常.
我的HTML代码(没有DOCTYPE正确显示):
<html>
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>
我的HTML代码(背景颜色为红色未应用DOCTYPE):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>
另外,我试过代替HTML5,XHTML 1.0严格,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
和,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
但不适用任何一个.如何正确添加版本.
2)也是现在最好的版本.带有XHTML的HTML5或html4.01或HTML 4.01？
Wes*_*rch 20
缺少doctype会触发quirks模式,这仅仅意味着在人们开始使用doctypes之前创建的"遗留代码"的向后兼容性.它几乎不应该被使用; 你应该总是声明一个doctype.
在这个时代,这就是你所需要的:
<!DOCTYPE html>
如果您愿意,可以继续使用此doctype的XHTML语法.就CSS而言,只要你有一个,我就不会对不同的docty知道任何差异.然而,Doctypes将改变哪些属性和元素是有效的以及在哪种上下文中.使用W3C Validator测试您的HTML.
不幸的是,这意味着您将重写大部分CSS以在标准模式下工作.我知道这听起来像是一件苦差事,但你只需咬紧牙关并重写它.
前进的重要注意事项:删除内联CSS并使用外部样式表,否则(除其他外)你会发现维护是一场彻头彻尾的噩梦.
有趣的是:http://hsivonen.iki.fi/doctype/#choosing
选择Doctype
text/html的
简而言之:以下是为新text/html文档选择doctype的简单指南:
标准模式,前沿验证
Run Code Online (Sandbox Code Playgroud)<!DOCTYPE html>这是正确的做法,除非你有特殊的理由要避免它.有了这个文档类型,可以验证新的功能,如
<video>,<canvas>和ARIA.请务必在顶级浏览器的最新版本中测试您的页面.标准模式,遗留验证目标Run Code Online (Sandbox Code Playgroud)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">此doctype还会触发标准模式,但如果您想要避免使用新功能或更精确地验证旧功能,则可以坚持使用旧版验证.您想使用标准模式,但在表格布局中使用切片图像并且不想修复它们
Run Code Online (Sandbox Code Playgroud)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">这为您提供了几乎标准模式.请注意,如果您稍后转移到HTML5(因此,完整的标准模式),基于表格中切片图像的布局可能会中断.你真的想要Quirks模式
没有doctype.
请不要这样做.对于Quirks模式的故意设计将会困扰你,你的同事或未来的继任者 - 当没有人关心Windows IE 6时(已经没有人关心Netscape 4.x和IE 5).设计Quirks模式是个坏主意.相信我.
如果您仍然想要支持Windows IE 6,最好使用条件注释为其应用特定的黑客,而不是将其他浏览器回归到Quirks模式.
我不推荐任何XHTML文档类型,因为将XHTML作为text/html服务被认为是有害的.如果您仍然选择使用XHTML doctype,请注意XML声明使IE 6(但不是IE 7!)触发Quirks模式.
vdb*_*der 12
问题是div设置为100%(正文)的100%,这对我们而言不是浏览器.如果将主体位置设置为绝对并将其顶部,底部,左侧,右侧设置为0,则可以获得相同的效果,并且div的高度设置将按照您期望的方式工作.这是代码.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>