IE和FireFox中的CSS问题

时间：2011-04-16 04:32:08

标签： css ajax jquery-ui

我有一个使用Jquery.Block-UI和ajax构建的弹出窗口...我对功能没有任何问题，但事情是CSS，当我在Chrome中检查时没有CSS问题...但是当它来到IE和FIREFOX更糟糕的是......弹出设计已经不见了......请看下面的图片

IN CHROME : WORKS FINE:

enter image description here 

IN IE-8

enter image description here 

IN FIREFOX:

enter image description here

以下是代码：

头标记：

<link href="style.css" rel="stylesheet" type="text/css" />

内容：

<table class="quot-popup" cellpadding="0" cellspacing="0">
<tr><td><div style="float: right;"><input type="image" style="" src="../Webimages/x.png" onclick="closePop();"/></div></td></tr>
<%if(navLevel.trim().equalsIgnoreCase("0")){%>
<tr><td class="poptd">Are you a Registered User please <a href="web/login.jsp">Sign in</a> to Quote List, Or <a href="web/new_user_registration.jsp">Sign Up</a> to Register.</td></tr>
<%}else if(navLevel.trim().equalsIgnoreCase("1")){%>
<tr><td class="poptd">Are you a Registered User please <a href="login.jsp">Sign in</a> to Quote List, Or <a href="new_user_registration.jsp">Sign Up</a> to Register.</td></tr>
<%}%>
<tr><td class="poptd">Or</td></tr>
<tr><td class="poptd">You want to continue without Register, <a href="javascript:showMail();">Click Here</a> to Quote List.</td></tr>
</table>
<table id="askEmail" class="quot-mailPopup" cellpadding="0" cellspacing="0">
<tr><td class="mailtd1">Enter your Email Address : </td>
<td class="mailtd2"><input type="text" id="anonymousEmailId" name="anonymousEmailId" value=""/></td>
<td class="mailtd3"><input type="image" src="../Webimages/go-btn.jpg" onclick="sbtEmail(); return false;"/></td></tr>
</table>

CSS：

table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}


table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}


table.quot-mailPopup{width: 100%; font-size: 11px; font-weight: bold; display: none; text-align: center;}
table.quot-mailPopup td.mailtd1{width: 40%; padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2{width: 50%; padding-top:6px;padding-bottom:6px; padding-right:3px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2 input{width: 250px; height:18px;}
table.quot-mailPopup td.mailtd3{padding-top:6px;padding-bottom:6px;  text-align: center; vertical-align:middle; color:#0ea05f;}

Html：pop up will be called on click <a href="***.jsp" id="QutLstLnkId">List</a> 

<!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>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />

<link href="Webcss/style.css" rel="stylesheet" type="text/css" />
<link href="Webcss/contentslider.css" rel="stylesheet" type="text/css" />
<link href="Webcss/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
<link href="Webimages/favicon.ico" rel="shortcut icon" />

<script type="text/javascript" src="Webjs/jquery.js"></script>
<script type="text/javascript" src="Webjs/jquery.blockUI.js"></script>
<script type="text/javascript" src="Webjs/ajax.js"></script>


<script type="text/javascript">
//------------------------------------- For Pop-Up
$(function() {
$('#QutLstLnkId').click(function() {
    var qMailId = $("#qtMailId").val();
    qMailId = $.trim(qMailId);
    if(qMailId == "null" || qMailId == ""){
    $.blockUI({
        message: $('#messageDispDiv'),css: {
        width:'530px',
        height:'auto',
        top:  ($(window).height() - 110) /2 + 'px', 
        left: ($(window).width() - 530) /2 + 'px'
        } });
    $("#messageDispDiv").block({css:{border: 'none',padding: '15px',backgroundColor: '#000','-webkit-border-radius': '10px','-moz-border-radius': '10px',width:'200px',opacity: .5,color: '#0A7A48'}});
    enqueue("web/quoteList.jsp?oper=QUOTLSTAUTH&pg=0",processAjax);
    }else{window.location.href="web/createQuoteList.jsp";}
 });
});
function processAjax(s){
    $("#messageDispDiv").unblock();
    $("#messageDispDiv").html(s);
}
function closePop(){
    $.unblockUI();
}
function showMail(){
 $("#askEmail").show();
}
//------------------------------------- For Pop-Up

</script>

</head>
<body>

<!-- PopUp div -->
<div id="messageDispDiv" style=" display: none; width:530px; min-height: 110px; border: 1px solid #0A7A48; text-align:center;">
<div id="askEmailId" style="display:none;">
</div>
</div>
<!-- PopUp div -->

</body>
</html>

谢谢。

2 个答案:

答案 0 :(得分：0)

老兄......你的代码......（对不起，这很难读）。

我打赌你有一个CSS问题，因为你将它放入桌面的方式。表和TD看起来像DIV，但它们绝对不是。我敢打赌这就是为什么Chrome似乎工作正常，但FF和IE都是snubbin'ya。

那么 - 您是否可以简化设计并简化操作？：

<table id="popup"> <!-- this could/should be a div //-->
  <tr>
    <td align="center">
      <img src="close.png" />
      <p>Are You Registered...Register</p>
      <p>Or</p>
      <p>Or</p>
      <p>You want to continue....list.<br />
      Enter your Email Address : <input></p>
    </td>
  </tr>
</table>

CSS（例如）：

#popup { border:4px solid gray; position:relative; }
#popup #closer { position:absolute; top:10px; right:10px; }
p { font: 1.1em/1.5 sans-serif; }
...etc. You get the gist - it's simple.

对于单细胞表，您将显示11行CSS。这是我的信念，当我的CSS开始变得那么膨胀......我的代码在某个地方出错了 - 重构的时间。

你偏离了语义标记太远了。你会花更多的时间来破解你的代码设计。

答案 1 :(得分：0)

解决了....谢谢大家... Css或代码或浏览器没有任何问题...它是使用Apache服务器缓存...清除了Apache缓存并且它在所有浏览器中都很好......

相关问题
最新问题