搞不懂了，难道又是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/imghw/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/imghw/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/imghw/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/imghw/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/imghw/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