Question

这是我正在尝试的应用程序的示例。在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>

Answer 1

对我来说，似乎你没有设置元素的宽度参数，所以它被设置为默认值，它只与文本表示一样多。当我错过宽度/高度或某些元素时，我经常遇到IE的问题。

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

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

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

尝试将<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;

Answer 2

我使用'div'标签而不是'label'标签。解决了这个问题。

IE9中的IE10背景图像尺寸缩小（java code）

2 个答案: