提交按钮不显示为标准网页 [关闭]答案

【问题标题】：submit button does not appear as standard web [closed]提交按钮不显示为标准网页 [关闭]
【发布时间】：2011-10-16 00:57:53
【问题描述】：

我正在开发一个 Web 应用程序，但提交按钮并没有像标准 Web 那样显示，就像当您将鼠标移到它上面时它变成蓝色，出现的只是一个没有边框的灰色背景，这在所有浏览器中都会发生，我'对不起，我没有足够的声望放图片，而且点击时没有出现效果接收器，而且它还没有css，有人可以帮助我或知道为什么吗？

<input type="submit" name="send" value="send"/>

*{                      margin:0;
                    padding:0;
                    text-decoration:none;
                    border:0px;
                    font-style:normal;  
                    outline:none;
                    list-style-type: none;}

body    {                   width:970px;
                    margin:0 auto;
                    font-family:arial;
                    background:#fdfdfd;}

我正在使用的标题是这个...

<!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><title>Painel Administrativo:</title>
<meta name="description" content="O Compareai é uma ferramenta para vôçe"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Language" content="pt-br" />
<link rel="stylesheet" media="all" type="text/css" href="css/dropdown.css" />

<noscript>
<link rel="stylesheet" href="css/painel_administrativo.css" type="text/css"/>
</noscript>
 <script type='text/javascript' src='js/pa.js'></script>



</head>

已尝试取消重置，但问题仍然存在

【问题讨论】：

您能否提供更多信息，例如您的平台、浏览器和示例代码？听起来有些 CSS 会影响您的按钮，但您不知道。
您需要发布您正在使用的系统、浏览器以及您的代码和 css 是什么样的信息——这里没有任何信息可以让任何人帮助您。
昨晚他也问了同样的问题。他实际上在昨晚发布了代码/图片......

标签： javascript css forms button

【解决方案1】：

根据我对您问题的理解，您遇到的问题归结为 CSS 特异性规则，请查看 Smashing Magazine 了解更多信息。

基本上，您的 input 元素从父样式继承了它的属性，因此您需要为 input 元素创建 CSS 以使其外观和行为符合您的要求。

【讨论】：

没有继承。选择器匹配元素并应用于它。
除了* 选择器，它适用于每个元素。这是一种快速重置，但会导致诸如此类的问题。
继承正在进行，因为他说“出现的只是没有边框的灰色背景”，*{} CSS中指定了无边框，他需要创建一个类并分配它或在 CSS 中指定 input 元素

【解决方案2】：

正如其他答案所述，问题是由以下原因引起的：

*{                      margin:0;
                    padding:0;
                    text-decoration:none;
                    border:0px;
                    font-style:normal;  
                    outline:none;
                    list-style-type: none;}

* 上的border:0px 适用于所有内容，包括您的“提交按钮”，这就是您遇到此问题的原因。

如果您想使用 CSS 重置，请使用真实的，而不是 * { .. }：

http://meyerweb.com/eric/tools/css/reset/

【讨论】：

【解决方案3】：

*{                  margin:0;
                    padding:0;
                    text-decoration:none;
                    border:0px;
                    font-style:normal;  
                    outline:none;
                    list-style-type: none;}

* 适用于一切。所以在那里你将边框设置为0。你需要更具体地使用你的css。

【讨论】：

【解决方案4】：

您的问题可能与您正在使用的 * 重置有关。通过在其中声明border:0px;，您将消除输入中的这些样式。在此处查看：http://jsfiddle.net/Skooljester/yjNpR/ 将 border:0px; 属性从 * 选择器中删除。

【讨论】：

【解决方案5】：

我试用了您的代码，结果如下：

Opera:  not normal submit button, gray bg with no borders
FF:     not normal submit button, gray bg with no borders
IE:     normal submit button
Chrome: not normal submit button, gray bg with no borders
Safari: not normal submit button, gray bg with no borders

如果您希望所有浏览器都呈现无边框和灰色背景，请创建一个类而不是使用 '*'

例如：

 .mybuttons{
  margin:0;
  padding:0;
  text-decoration:none;
  border:0px;
  font-style:normal;
  outline:none;
  list-style-type: none;
  }

然后

 <input type="submit" name="send" value="send" class="mybuttons" />

如果您希望它看起来像一个普通的提交按钮，请不要在您的 css 代码中使用 '*{}'。

【讨论】：