关于DOCTYPE 引发的样式问题_html/css_WEB-ITnose-html教程-PHP中文网

关于DOCTYPE 引发的样式问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:48:39

原创

1638人浏览过

今天改了一个bootstrap的页面，加入了如下代码，

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

登录后复制

然后页面就有问题了，对齐不了，如图所示

去掉之后，改成如下

<!doctype html><html lang="zh-cn">

登录后复制

即可对齐了，请问这个是啥情况？

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

回复讨论(解决方案)

show your whole code

这两个文档声明使得浏览器使用了两个不同的方式来解析文档，长的那个是使用xhtml的标准，短的那个使用html5的标准

还是贴一下全部代码吧。
楼上说的那个应该不对你写的这个是HTML5声明的完整写法 nbsp;html>是HTML5声明的简略写法
参照http://www.divcss5.com/html5/h701.shtml

<!DOCTYPE html><html lang="zh-cn"><head><title>${pd.SYSNAME}</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="static/login/bootstrap.min.css" /><link rel="stylesheet" href="static/login/css/camera.css" /><link rel="stylesheet" href="static/login/bootstrap-responsive.min.css" /><link rel="stylesheet" href="static/login/matrix-login.css" /><link href="static/login/font-awesome.css" rel="stylesheet" /><script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script></head><body>	<div		style="width:100%;text-align: center;margin: 0 auto;position: absolute;">		<div id="loginbox">			<form action="" method="post" name="loginForm"				id="loginForm">				<div class="control-group normal_text">					<h3>						<img src="static/login/logo.png" alt="Logo" />					</h3>				</div>				<div class="control-group">					<div class="controls">						<div class="main_input_box">							<span class="add-on bg_lg">							<i><img     style="max-width:90%" src="static/login/user.png" / alt="关于DOCTYPE 引发的样式问题_html/css_WEB-ITnose" ></i>							</span><input type="text" name="loginname" id="loginname" value="" placeholder="请输入用户名" />						</div>					</div>				</div>				<div class="control-group">					<div class="controls">						<div class="main_input_box">							<span class="add-on bg_ly">							<i><img     style="max-width:90%" src="static/login/suo.png" / alt="关于DOCTYPE 引发的样式问题_html/css_WEB-ITnose" ></i>							</span><input type="password" name="password" id="password" placeholder="请输入密码" value="" />						</div>					</div>				</div>				<div style="float:right;padding-right:10%;">					<div style="float: left;margin-top:3px;margin-right:2px;">						<font color="white">记住密码</font>					</div>					<div style="float: left;">						<input name="form-field-checkbox" id="saveid" type="checkbox"							onclick="savePaw();" style="padding-top:0px;" />					</div>				</div>				<div class="form-actions">					<div style="width:86%;padding-left:8%;">						<div style="float: left;">							<i><img  src="static/login/yan.png" / alt="关于DOCTYPE 引发的样式问题_html/css_WEB-ITnose" ></i>						</div>						<div   style="max-width:90%" class="codediv">							<input type="text" name="code" id="code" class="login_code"								style="height:16px; padding-top:0px;" />						</div>						<div style="float: left;">							<i><img   style="max-width:90%" id="codeImg" alt="点击更换"								title="点击更换" src="" /></i>						</div>						<span class="pull-right" style="padding-right:3%;"><a							href="javascript:quxiao();" class="btn btn-success">取消</a></span> <span							class="pull-right"><a onclick="severCheck();"							class="flip-link btn btn-info" id="to-recover">登录</a></span>					</div>				</div>			</form>			<div class="controls">				<div class="main_input_box">					<font color="white"><span id="nameerr">Copyright &copy; FH							2100</span></font>				</div>			</div>		</div>	</div>	<div id="templatemo_banner_slide" class="container_wapper">		<div class="camera_wrap camera_emboss" id="camera_slide">			<div data-src="static/login/images/banner_slide_01.jpg"></div>			<div data-src="static/login/images/banner_slide_02.jpg"></div>			<div data-src="static/login/images/banner_slide_03.jpg"></div>		</div>		<!-- #camera_wrap_3 -->	</div>	<script type="text/javascript">				</script>	<script>		//TOCMAT重启之后 点击左侧列表跳转登录首页 		if (window != top) {			top.location.href = location.href;		}	</script>	<script src="static/js/bootstrap.min.js"></script>	<script src="static/js/jquery-1.7.2.js"></script>	<script src="static/login/js/jquery.easing.1.3.js"></script>	<script src="static/login/js/jquery.mobile.customized.min.js"></script>	<script src="static/login/js/camera.min.js"></script>	<script src="static/login/js/templatemo_script.js"></script>	<script type="text/javascript" src="static/js/jquery.tips.js"></script>	<script type="text/javascript" src="static/js/jquery.cookie.js"></script>	<script type="text/javascript" src="resource/js/login.js"></script></body></html>

登录后复制

完整代码奉上

还是贴一下全部代码吧。
楼上说的那个应该不对你写的这个是HTML5声明的完整写法 nbsp;html>是HTML5声明的简略写法
参照http://www.divcss5.com/html5/h701.shtml

html5的完整声明写法？html5我貌似只记得有一种写法吧，而且html5的声明会用到xhtml的dtd?

还是贴一下全部代码吧。
楼上说的那个应该不对你写的这个是HTML5声明的完整写法 nbsp;html>是HTML5声明的简略写法
参照http://www.divcss5.com/html5/h701.shtml

html5的完整声明写法？html5我貌似只记得有一种写法吧，而且html5的声明会用到xhtml的dtd?
你看下我贴的链接也许是我理解错了。