问：我有一个关于类性能的问题，我在两个元素上使用一个类，第一个是输入类型按钮，第二个是锚标记（a）两者看起来都不同。为什么发生这种情况，任何人都可以有任何适当的答案。
先感谢您。
CSS：
* {margin：0; padding：0;}
.demo {
高度：30px；
宽度：100px；
颜色：#fff;
背景：#ccc;
边框：无；
向左飘浮 ;
文本对齐：居中；
font-family：“ arial”；
font-size：12px;
边框：1px实线＃000；
}
HTML：-
<a HREF = "" 类= "demo">你好</A>
<button type = “提交” class = “ demo” >您好</ button>
答：链接和按钮的呈现方式自动不同。对于按钮，浏览器中的HTML已经具有内置按钮的形状和样式，该按钮会根据其默认样式自动显示该按钮。这意味着，当您要设置按钮样式以使其看起来像链接时，必须考虑到某些CSS属性必须针对该按钮进行更改。
使用您使用的CSS，这就是我所做的更改：
--CSS--
.demo-container {
显示：表；
}
.demo {
显示：表格单元格；/ *添加此内容* /
垂直对齐：中间；/ *添加此内容* /
高度：30px；
宽度：100px；
颜色：#fff;
背景：#ccc;
边框：无；
向左飘浮 ;
文本对齐：居中；
font-family：“ arial”；
font-size：12px;
边框：无；/ *更改了此* /
左边距：5px; / *添加此内容* /
框阴影：1px 1px 1px＃2d2d2d; / *添加此内容* /
文字修饰：无；/ *添加此内容* /
光标：指针；/ *添加此内容* /
}
--HTML--
<div class =“ demo-container”>
<a href="" class="demo">你好</a>
<button type =“ submit” class =“ demo”>你好</ button>
</ div> <！-/ END演示容器->
我创建了一个包装您的演示元素的容器。这是必需的。该容器的CSS在上方。
我在CSS中所做的更改如下：
“显示：表格单元；” -与容器DIV中的“显示：表格”一起使用。
“垂直对齐：中间；” -使内容（文本）在中间垂直对齐。“ display：table”和“ display：table-cell”一起使这项工作。（不适用于inline-block或block）。
“边框：无” -更改了此设置，因为这使链接和按钮的样式显得不同。这也可以通过取消按钮来更改浏览器的默认样式。
“ margin-left：5px”-需要此功能将链接和按钮彼此分开。但是，由于您实际上可能不会并排使用它们，因此请使用此边距在页面上任何其他元素的链接或按钮之间创建空间。
“框阴影：1px 1px 1px＃2d2d2d;” -使用它来模拟边框，并且由于它为链接提供了与按钮相同的效果，因此可以正常工作。
“文本装饰：无；” -这将删除链接文本的默认下划线。如果您希望它们都带有下划线，请使用“ text-decoration：underline;”。
“光标：指针” -我用它来使链接和按钮以相同的方式显示光标。如果您不想使用它，则不必使用它。
