搞不懂了，难道又是BOM头？_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

搞不懂了，难道又是BOM头？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:23 PM

html css utf8

仔细看一下不难发现，登录名和密码输入栏不一边长，为啥？下拉菜单前面为啥有空格？（附代码）

<style type="text/css">body{font:12px Arial, Helvetica, sans-serif; color: #000; background-color: #EEF2FB; margin: 0px; }</style><link href="../css/skin.css" rel="stylesheet" type="text/css" /><body><table width="100%" border="0" cellpadding="0" cellspacing="0">	<tr>		<td width="17" height="29" valign="top" background="../images/mail_leftbg.gif"><img  src="/static/imghwm/default1.png"  data-src="../images/left-top-right.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="搞不懂了，难道又是BOM头？_html/css_WEB-ITnose" ></td>		<td  valign="top" background="../images/content-bg.gif">		<table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" class="left_topbg" id="table2">		<tr><td height="31"><div class="titlebt">用户管理</div></td></tr>		</table></td>		<td width="16" valign="top" background="../images/mail_rightbg.gif"><img  src="/static/imghwm/default1.png"  data-src="../images/nav-right-bg.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="搞不懂了，难道又是BOM头？_html/css_WEB-ITnose" ></td>	</tr>	<tr>		<form method="POST" name="frmAdd" action=<?php echo $_SERVER['PHP_SELF'];?>>		<td height="71" valign="middle" background="../images/mail_leftbg.gif"> </td>		<td valign="top" bgcolor="#F7F8F9">		<table width="100%" height="138" border="0" cellpadding="0" cellspacing="0">		<tr>			<td valign="top"><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">			<tr><td class="left_txt">当前位置：用户管理 >> 添加用户</td></tr>			<tr><td height="20"><table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">			<tr>				<td>				</td>			</tr></table></td></tr>			<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0">			</table></td></tr>			<tr><td> </td></tr>			<tr>            <td><table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" class="nowtable">				<tr><td class="left_bt2">    添加新用户</td></tr></table>			<tr>			<?php				include("../BOM.php");			?>				<td><table width="100%" border="0" cellspacing="0" cellpadding="0">				<tr>					<td width="20%" height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">登录名：</td>					<td width="3%" bgcolor="#f2f2f2"> </td>					<td width="32%" height="30" bgcolor="#f2f2f2"><input type="test" name="LoginName" value="" size="30" /></td>					<td width="45%" height="30" bgcolor="#f2f2f2" class="left_txt">登录账号信息</td>				</tr>				<tr>					<td height="30" align="right" class="left_txt2">密码：</td>					<td> </td>					<td height="30"><input type="password" name="Password" value="" size="30" /></td>					<td height="30" class="left_txt">登录密码信息</td>				</tr>				<tr>					<td height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">用户角色：</td>					<td bgcolor="#f2f2f2"> </td>					<td height="30" bgcolor="#f2f2f2"><?php include("../RoleSelect.php");?></td>					<td height="30" bgcolor="#f2f2f2" class="left_txt">用户角色信息</td>				</tr></table></td>			</tr></td></tr></table></td>		</tr>		<table width="100%" border="0" cellspacing="0" cellpadding="0">			<tr><td height="30" colspan="3"> </td></tr>            <tr>              <td width="50%" height="30" align="right"><input type="submit" name="btnAdd" value=" 确定 " /></td>              <td width="6%" height="30" align="right"> </td>              <td width="44%" height="30"><input type="reset" value=" 重写 " name="cancel" /></td>            </tr>            <tr><td height="30" colspan="3"> </td></tr>		</table>		<td background="../images/mail_rightbg.gif"> </td>		<tr>			<td valign="middle" background="../images/mail_leftbg.gif"><img  src="/static/imghwm/default1.png"  data-src="../images/buttom_left2.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="搞不懂了，难道又是BOM头？_html/css_WEB-ITnose" ></td>			<td height="17" valign="top" background="../images/buttom_bgs.gif"><img  src="/static/imghwm/default1.png"  data-src="../images/buttom_bgs.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="搞不懂了，难道又是BOM头？_html/css_WEB-ITnose" ></td>			<td background="..//mail_rightbg.gif"><img  src="/static/imghwm/default1.png"  data-src="../images/buttom_right2.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="搞不懂了，难道又是BOM头？_html/css_WEB-ITnose" ></td>		</tr></table></td></form>	</tr></table></body>

@charset "utf8";.login_top_bg {	background-image: url(../images/login-top-bg.gif);	background-repeat: repeat-x;}.body {	background-color: #EEF2FB;	left: 0px;	top: 0px;	right: 0px;	bottom: 0px;}.login-buttom-bg {	background-image: url(../images/login-buttom-bg.gif);	background-repeat: repeat-x;}.login-buttom-txt {	font-family: Arial, Helvetica, sans-serif;	font-size: 10px;	color: #ABCAD3;	text-decoration: none;	line-height: 20px;}.login_txt {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	color: #333333;}.Submit {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #629DAE;	text-decoration: none;	background-image: url(../images/Submit_bg.gif);	background-repeat: repeat-x;}.login_bg {	background-image: url(../images/login_bg.jpg);	background-repeat: repeat-x;}.login_bg2 {	background-image: url(../images/login-content-bg.gif);	background-repeat: no-repeat;	background-position: right;}.admin_txt {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #FFFFFF;	text-decoration: none;	height: 38px;	width: 100%;	line-height: 38px;}.login_txt_bt {	font-family: Arial, Helvetica, sans-serif;	font-size: 14px;	line-height: 25px;	color: #666666;	font-weight: bold;}.admin_topbg {	background-image: url(../images/top-right.gif);	background-repeat: repeat-x;}.txt_bt {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	font-weight: bold;	color: #000000;	text-decoration: none;}.left_topbg {	background-image: url(../images/content-bg.gif);	background-repeat: repeat-x;}.admin_toptxt {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #4A8091;	height: 18px;	width: 100%;	overflow: hidden;	position: fixed;}.left_bt {	font-family: Arial, Helvetica, sans-serif;	font-size: 14px;	font-weight: bold;	color: #395a7b;}.left_bt2 {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	font-weight: bold;	color: #333333;}.titlebt {	font-size: 12px;	line-height: 26px;	font-weight: bold;	color: #000000;	background-image: url(../images/top_bt.jpg);	background-repeat: no-repeat;	display: block;	text-indent: 15px;	padding-top: 5px;}.left_txt {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	color: #666666;}.left_txt2 {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	color: #000000;}.view_title {	font-family: Arial, Helvetica, sans-serif;	font-size: 13px;	line-height: 25px;	color: #666666;	text-align: center;}.view_list {	font-family: Arial, Helvetica, sans-serif;	font-size: 13px;	line-height: 25px;	color: #000000;	text-align: center;}.view_page {	font-family: Arial, Helvetica, sans-serif;	font-size: 13px;	font-weight: bold;	line-height: 25px;	color: #191964;	text-align: center;}.view_checkbox {	font-family: Arial, Helvetica, sans-serif;	font-size: 13px;	line-height: 25px;	color: #000000;	text-align: left;}.nowtable {	background-color: #e1e5ee;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	border-top-style: solid;	border-top-color: #bfc4ca;	border-right-color: #bfc4ca;	border-bottom-color: #bfc4ca;	border-left-color: #bfc4ca;}.left_txt3 {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	color: #003366;	text-decoration: none;}.left_ts {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	font-weight: bold;	color: #FF6600;}.line_table {	border: 1px solid #CCCCCC;}.sec1 {	CURSOR: hand;	COLOR: #000000;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	border: 1px solid #B5D0D9;	background-image: url(../images/right_smbg.jpg);	background-repeat: repeat-x;}.sec2 {	FONT-WEIGHT: bold;	CURSOR: hand;	COLOR: #000000;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 25px;	background-color: #e2e7ed;	border: 1px solid #e2e7ed;}.main_tab {	COLOR: #000000;	BACKGROUND-COLOR: #e2e7ed;	border: 1px solid #e2e7ed;}.MM a {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 26px;	color: #666666;	background-image: url(../images/menu_bg.gif);	background-repeat: no-repeat;	list-style-type: none;	list-style-image: none;}a:link {	font-size: 12px;	line-height: 25px;	color: #333333;	text-decoration: none;}a:hover {	font-size: 12px;	line-height: 25px;	color: #666666;	text-decoration: none;}a:visited {	font-size: 12px;	line-height: 25px;	color: #333333;	text-decoration: none;}.MM a:link {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 26px;	color: #666666;	background-image: url(../images/menu_bg.gif);	background-repeat: no-repeat;	list-style-type: none;	list-style-image: none;}

回复讨论(解决方案)

是不是在chrome下才这样，测试了下，在IE9和FF下没有这种情况，在chrome下会发生这样的情形了，应该是chrome浏览器为type=password,自动加载了个样式：
input:not([type]), input[type="color"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"] {
padding: 1px 0px;
}

而如果不是password，自动加载了另一个样式：
input, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
。。。。。。。
}
这样就长短出来了。

为“” 加个样式：padding: 1px;就好了，至少chrome下能好，IE6没办法，我这边模拟不了。
不行，加了两边都会不齐，而且主要问题是那个下拉框，那个空了太多。

这样加：
1.那个input加个class  “”
2.在css文件中加：
  .in-password {
padding: 1px;
   }
在chrome中测试成功。这个是解决长短不一的。
3.你那个下拉框把html代码贴出来，你贴出来的是引入了个PHP文件。

这样加：
1.那个input加个class  “”
2.在css文件中加：
  .in-password {
padding: 1px;
   }
在chrome中测试成功。这个是解决长短不一的。
3.你那个下拉框把html代码贴出来，你贴出来的是引入了个PHP文件。

我是这样加的啊，也是chrome。。。效果就是相对于上面的框移到了中间位置，结果两边都多出来一点点

<!--RoleSelect.php:用户角色下拉框---------------><?php    	include_once("RoleClass.php");	//利用Role类的InitData()读取用户角色信息	$Role=new Role();       $roleid=$Role->RolePri($_SESSION["ss_user_id"]);	//循环将用户角色写入下拉框选项中	echo "<select name=RoleSelect>";	foreach($Role->mInforArray as $item)	{	       echo "<option value=".$item->RoleId.">".$item->RoleName."</option>";	}	echo "</select>"?>

<!--RoleClass.php:状态类---------------------------------><?phpclass Role{ 		var $mInforArray;			//状态基本信息数组	var $pRoleId=0;       var $mRoleArray;/********************************************* 函数：	InitData功能：				获取公文状态的基本信息，放入数组mInforArray中输入参数：			***********************************************/ function GetRoleIdFromUserId($pUserId){	require("sys_conf.inc");	require_once("DataBase.php");	$db=new DataBase($DBHOST,$DBUSER,$DBPWD,$DBNAME);		//获取权限信息	$db->SqlString="select * from user";	$db->SqlString=$db->SqlString." where UserId=$pUserId ";	$db->Query();		$this->mRoleArray=$db->mResultArray;       $this->pRoleId= $this->mRoleArray[0]->RoleId;      	$db->__destruct();}function RolePri($pUserId){     	require("sys_conf.inc");	require_once("DataBase.php");	$db=new DataBase($DBHOST,$DBUSER,$DBPWD,$DBNAME);		$this->GetRoleIdFromUserId($pUserId);	//获取基本信息	$db->SqlString="select * from role where RoleId < $this->pRoleId";	$db->Query();		$this->mInforArray=$db->mResultArray;	$db->__destruct();	}}?>

<!--RoleSelect.php:用户角色下拉框---------------><?php    	include_once("RoleClass.php");	//利用Role类的InitData()读取用户角色信息	$Role=new Role();       $roleid=$Role->RolePri($_SESSION["ss_user_id"]);	//循环将用户角色写入下拉框选项中	echo "<select name=RoleSelect>";	foreach($Role->mInforArray as $item)	{	       echo "<option value=".$item->RoleId.">".$item->RoleName."</option>";	}	echo "</select>"?>

<!--RoleClass.php:状态类---------------------------------><?phpclass Role{ 		var $mInforArray;			//状态基本信息数组	var $pRoleId=0;       var $mRoleArray;/********************************************* 函数：	InitData功能：				获取公文状态的基本信息，放入数组mInforArray中输入参数：			***********************************************/ function GetRoleIdFromUserId($pUserId){	require("sys_conf.inc");	require_once("DataBase.php");	$db=new DataBase($DBHOST,$DBUSER,$DBPWD,$DBNAME);		//获取权限信息	$db->SqlString="select * from user";	$db->SqlString=$db->SqlString." where UserId=$pUserId ";	$db->Query();		$this->mRoleArray=$db->mResultArray;       $this->pRoleId= $this->mRoleArray[0]->RoleId;      	$db->__destruct();}function RolePri($pUserId){     	require("sys_conf.inc");	require_once("DataBase.php");	$db=new DataBase($DBHOST,$DBUSER,$DBPWD,$DBNAME);		$this->GetRoleIdFromUserId($pUserId);	//获取基本信息	$db->SqlString="select * from role where RoleId < $this->pRoleId";	$db->Query();		$this->mInforArray=$db->mResultArray;	$db->__destruct();	}}?>

PHP代码我看不懂的。。。。。。。你把这些代码生成后的html代码贴出来就行了。

密码框和文本框的默认宽度是不一样的你要设置一个指定的宽度

select一样设置一个宽度比较好

	<select name=RoleSelect>	<option value= $item->RoleId > $item->RoleName</option>;	</select>

大概就是这样子

兄弟别怪我吐槽。。。看到table用来布局我就。。。。

密码框和文本框的默认宽度是不一样的你要设置一个指定的宽度

select一样设置一个宽度比较好

嗯呢，文本框密码框改过来了，但是select好像不行，这个是位置不对，大小无所谓。

兄弟别怪我吐槽。。。看到table用来布局我就。。。。

怎么啦我不太懂，我都是网上找的直接下来用。

<style type="text/css">body{font:12px Arial, Helvetica, sans-serif; color: #000; background-color: #EEF2FB; margin: 0px; }//这里加  看-下行不select{    position: relative;    left: 0px;      top: 0px;      width: 185px;     }</style>觉得是样式问题呢

<style type="text/css">body{font:12px Arial, Helvetica, sans-serif; color: #000; background-color: #EEF2FB; margin: 0px; }//这里加  看-下行不select{    position: relative;    left: 0px;      top: 0px;      width: 185px;     }</style>觉得是样式问题呢

我已经解决了，把select写在php外面就好了。

我已经解决了，把select写在php外面就好了。
Good job

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles