button统一设计只使用css实现

最新推荐文章于 2024-09-07 09:00:00 发布

最新推荐文章于 2024-09-07 09:00:00 发布 · 313 阅读

文章标签：

#CSS #IE #XHTML #HTML

IT常识专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决IE浏览器中按钮因文字过多而发生变形的方法。通过在CSS中为button类型的input元素设置特定样式，可以确保不同长度的文字在按钮内正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先申明这个解决方案是通过优快云上发问得来的，所以在在优快云上发问还是很有帮助的。

问题由来，button里面的字数太多，导致在IE里面严重变形，所以需要设计一种button的样式，原来我能想到的只有两种：

一种就在在每个input标记里面加入class属性，看了看input标签的数量和页面的数量，这个打算我放弃了；

另外一种就是在css属性里面定义input，但是这样以来所有的input属性就全部变了。

废话少说，一下是本次的解决方案代码：

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
input[type=button]{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #DCDDDD;
color:#1E50A2;
display:inline-table;
float:left;
margin:5px 4px 0 0;
padding:2px 4px 1px 3px;
text-align:center;
vertical-align:middle;
}
input[type=button]:hover{
background:#1e50a2;
color:#fff;
}
</style>
</head>

<body>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
<input type="submit" value="submit"/>
<input type="text" value="text"/>
</body>
</html>