ie7 和 ie8 的按钮样式兼容

时间：2021-09-26 20:34:15

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,button,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,select,textarea,button{font-size:100%;}fieldset,img,abbr,acronym{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6,legend{font-size:100%;font-weight:400;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}

body{
	font-family : tahoma, "宋体", fantasy;
	font-size: 12px;
	padding:10px;
}

.bt {
	background-color: #FFFFFF;
	color: #075198;
	border:1px solid #4D85BA;
	font-family: verdana;
	font-weight: bold;
}
</style>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form action="" method="post">
  <tr>
    <td>&nbsp;<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交" class="bt"/></td>
  </tr></form>
</table>
</body>
</html>


ie7和ie8的按钮样式不一致 如何搞呢？

5 个解决方案

#1

浏览器不一样，对表单方面的属性的默认表现形式是不一样的。。
虽然你用了reset，但对于表单表现方面来说，你要重新定义才行。
比如上面的代码，你可能给按钮定义宽度和高度，这样，基本主流的浏览器都是一样的了。
唯一不一样的地方就是字与表单元素的对齐方式不一样。

#2

楼下继续

#3

第一种解决办法：
加入下面这个代码，IE8就会兼容，针对所有的。
<meta http-equiv="x-ua-compatible" content="ie=7" /> 

第二种办法：
针对按钮，你的按钮没有设置宽和高，IE7有默认的尺寸，和IE8不同，只要在你的样式根据自己的大小设置按钮的宽高就可以了：width:50px; height:20px。但是表单对齐有可能出现问题。

#4

查一下css hack然后根据不同的浏览器写不同的样式

#5

建议强制它的高度、宽度

#1

浏览器不一样，对表单方面的属性的默认表现形式是不一样的。。
虽然你用了reset，但对于表单表现方面来说，你要重新定义才行。
比如上面的代码，你可能给按钮定义宽度和高度，这样，基本主流的浏览器都是一样的了。
唯一不一样的地方就是字与表单元素的对齐方式不一样。

#2

楼下继续

#3

第一种解决办法：
加入下面这个代码，IE8就会兼容，针对所有的。
<meta http-equiv="x-ua-compatible" content="ie=7" /> 

第二种办法：
针对按钮，你的按钮没有设置宽和高，IE7有默认的尺寸，和IE8不同，只要在你的样式根据自己的大小设置按钮的宽高就可以了：width:50px; height:20px。但是表单对齐有可能出现问题。

#4

查一下css hack然后根据不同的浏览器写不同的样式

#5

建议强制它的高度、宽度
标签：

相关文章