Question

我正在处理该应用程序。有些css在IE中不起作用，而在Firefox中工作，例如Scrollbar，input类型，placeholder，required等等。所有这些工作在Firefox中都运行良好作为Chrome，但不是IE。我的IE版本是9 我的Firefox视图是

enter image description here

而我的IE视图是 -

enter image description here

我的css代码是 -

        input[type="submit"]{

          background:#3399cc;
          width:100%;
          border:0;
          padding:4%;
          font-family:'Open Sans',sans-serif;
          font-size:100%;
          color:#fff;
          cursor:pointer;
          transition:background .3s;
          -webkit-transition:background .3s;
        }

        input[type="submit"]:hover{
          background:#EE2C2C;
        }


input[type="text"]{
  width:100%;
  background:white;
  margin-bottom:2%;
  margin-top:2%;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:black;
}


input[type="password"]{
  width:100%;
  background:white;
  margin-bottom:2%;
  margin-top:2%;
  border:1px solid #ccc;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:black;
}

我尝试通过改变兼容性视图等多种方式来解决问题，尝试但未成功。

我的html文件是 -

    <%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.util.*" %>

    <html>
<head>



<link rel="shortcut icon" href="images/imageIcon.png" />
<title> IETM Solutions </title>

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" href="styles/ietmLogin.css" type="text/css"></link>
<%
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");

System.out.println("session -- A1 - " + session);

 if(session != null)
{
    session.invalidate();
    session = null;
} 
System.out.println("session -- A2 - " + session);
%>
</head>
<body>
<div id="LoginImage">
<div id="login">
<h1>IETM Document Management System</h1>

   <form action="Login" method="post">  

        <table>
     <tr>   
        <input type="text" name="user" placeholder="UserName" required = "true"/>
      </tr>
      <tr>  
        <input type="password" name="password" placeholder="Password" required = "true"/>
        </tr>
        <tr>
        <input type="submit" value="Login"/>  
            </tr>

            </table>
   </form>
</div>

<%

String error = (String) request.getAttribute("error");
//System.out.println("error : "+ error);
if(error != null)
{
    %>
<h4 align="center" style="color: red">Invalid User Name/Password</h4>
<% }

%>


 </div>
</body>
</html>

任何建议/解决方案都会非常有帮助。谢谢。

Answer 1

你没有doctype。

<!DOCTYPE html>
<html>
...

IE以Quirks模式渲染，它不支持<input>元素上的大多数样式。

Answer 2

看到你的HTML一个问题反复敲我。您只使用<table> and <tr>标记绘制了一个表，但是<td>标记在哪里也是绘图表所需的标记？我只是简单地重写了你的HTML，它对我来说很好：

<form action="Login" method="post">
    <table>
        <tr>
            <td>
                <input type="text" name="user" placeholder="UserName" required="true" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="password" name="password" placeholder="Password" required="true" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="Login" />
            </td>
        </tr>
    </table>
</form>

IE9不够智能，无法理解标记错误。如果这种方法在您的情况下运作正常，请不要忘记加宽或设计风格并留出更多空间。

有些css在IE中不起作用

2 个答案: