IE10 中的背景图像大小从 IE9(java 代码)减小

这是我正在尝试的应用程序的一个例子。IE10（无兼容模式）中的GUI应该与IE9中的GUI相同。但在IE10中，"ADD"标签的背景图像正在减小。我无法找到确切的原因。很少有解决方案建议我必须给出明确的"高度"和"宽度"参数，但这也没有帮助。

我不明白我以错误的方式做了什么。谢谢。jsp 代码如下：

<html>
<head>
<style>
 .buttonM{
  color: red;
  padding-top: 4px;
  font-family: "Verdana";
  font-size: 8pt;
  cursor: hand;
  background-image:url("images/buttonM.png");
  background-repeat: no-repeat;
  }
 .buttonMOver{
  color: white;
  padding-top: 4px;
  font-family: "Verdana";
  font-size: 8pt;
  cursor: hand;
  background: url("images/buttonM.png") no-repeat ;
  background-repeat: no-repeat;
  }
  table, th, td{
   border: 1px solid black;
  }
  label{
  height: 23; 
  text-align: center
  }
 </style>
 <script>
   function fnButtonClicked(){
     alert("button clicked");
   }
 </script>
 <title>trial</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <meta name="GENERATOR"
   content="Rational® Application Developer for WebSphere® Software">
 </head>
 <body>
   <table>
     <tr height="40">
       <td>
        Name:
       </td>
       <td>
        <input type="text">
       </td>
     </tr>
     <tr height="40">
       <td>
        Number:
       </td>
       <td>
        <input type="text">
       </td>
     </tr>
     <tr height="40">
       <td align="center" colspan="2">
         <label class="buttonM"
                style="width: 80; height: 23;"
                onmouseover="this.className='buttonMOver';"
                onmouseout="this.className='buttonM';"
                onclick="javascript:showDetailsPopUp();">
                ADD
          </label>
       </td>                
     </tr>
 </table>
</body>
</html>

对我来说

，您似乎没有设置元素的宽度参数，因此它设置为默认值，仅与您的文本表示形式一样多。当我错过宽度/高度或某些元素时，我通常会遇到这样的IE问题。

尝试以按钮样式和按钮所在的位置设置宽度和高度参数。

<label class="buttonM"
            style="width: 80px; height: 23px;">

通常以像素为单位定义宽度和高度。也可能是这样。在顶部，您至少以像素为单位定义了它们。后来你似乎忘记了它。

尝试将<td align="center" colspan="2">更改为<td align="center" colspan="2" width="80" height="23">

尝试为标注分类添加宽度：

label{
  height: 23 px ; <-- missing px unit 
  text-align: center;
  width: 80 px ;
  }

您还可以定义 TR 标签以避免再次编写相同的内容：

tr{
  height: 40px;
}

以后修改内容更简单。

您还可以将padding-top: 4px;更改为：padding: 4px 20px 4px 20px;此处：

.buttonM{
  color: red;
  padding-top: 4px;

我使用了"div"标签而不是"标签"标签。解决了问题。

相关内容

最新更新

热门标签：