Question

页面的HTML

问题是页面在mozilla，chrome和safari上正确地重新排列，但是在opera上是一个空格，它被插入到标签之后和“mainright3”div之前，它包含了页面右侧的所有内容。

请帮帮我..

此外，如果您知道任何使用此技巧的技巧，请发表评论..

它现在不兼容了，但是现在使用ie9使它更友好的任何输入都会很棒！（该页面并不打算支持早期的ie）

先谢谢!!!!

<html>
<head>
<title>Welcome to Sakoota Back Office - Admin Management</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../css/admin-500.css">
<script type="text/javascript" src="../js/design.js"></script>
<!-- ImageReady Styles (admin page pro.ai) -->

<!-- Added for Developing Purpose -->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/validate.js"></script>
<link rel="stylesheet" type="text/css" href="../css/validate.css"/>
<!-- For Create and Edit menu tabs -->
</head>

<body>
<center>
<!-- TABLE_01 IS THE Main div containing the whole page -->

<!-- Table_01 Main Div covering the whole page-->
<div id="Table_01" style="font-family:customfont;">

<!-- FloatLog is the div containing "search box" "logout" and "Admin NAme"-->
<div id="floatlog">Hello <?php echo $_SESSION['AdminLogin']; ?>!
    <a href="../logout.php?action=logout"  style="font-size:14px"> &nbsp;&nbsp;Log Out</a>&nbsp;&nbsp;
    <a href="../changePassword.php"  style="font-size:14px">Change password</a>
</div>

<div class="logo"><img src="../images/logo.png"></div><!--logo div--><!--top navigation bar : "top nav"--><!--blue navbar in the main navigation bar--><!--tabname is the manage label div--><!--tabname1 is the label of the current tba in the right content div-->

<span id="createMenu">  
<div id="topsecond"> <!--main tabs which are used to create and edit-->     
    <ul>
        <li id="grey"><a onClick="createPageView();">Create</a></li>
        <li id="blue"><a onClick="editPageView();" style="cursor:pointer;">Edit</a></li>
    </ul>
</div>
</span>
<span id="editMenu" style="display:none;">
<div id="topsecond"> <!--main tabs which are used to create and edit-->     
    <ul>
        <li id="blue"><a onClick="createPageView();" style="cursor:pointer;">Create</a></li>
        <li id="grey"><a onClick="editPageView();">Edit</a></li>
    </ul>
</div>
</span> 

<!-- Start for Manage Menu -->  
<div id="leftbarmain" class="greygradhor">
<div id="leftsec" class="bluegraddia">
    <?php include "../leftManageMenu.php"; ?>
</div>
</div>
<!-- End for Manage Menu -->

<!-- Start for Body Right Menu--> 
<div id="mainright">
<div id="labeltablelist" class="greygradhor" style="text-align:justify"></div>

<span id="acknowledgeMsgBoard" style="text-align:center; color:#fff;"></span>



<!-- Start for Create Page --> 
<span id="createPageView">
<form  name="log" method="post"> 
<input type="hidden" name="hdAction" id="hdAction"> 
<div id="righhidable">
<div id="mainsec" class="bluegraddia">
<div id="labeltablelist1" class="greygradhor" style="text-align:justify"><div id="tablelabels1"></div></div>
<div id="formn">

<!-- Success Message for Created User Start -->  
    <span id="successMsg" style="margin-left:200px;"></span>
<!-- Success Message for Created User End -->  

    <div id="leftaligntext">
    <div style=" padding-top:10px;">
    <div style="font-family:customfont;font-size:16px;color:#FFF">Full Name<span style="color:#900;">*</span></div>
    <input type="text" class="textfield tfont" id="name" name="name" value="" style="width:200px; padding:3px; padding-left:10px;" ><br>
    </div>
    <span id="nameErrMsg" ></span>

    <br><div style="font-family:customfont;font-size:16px;color:#FFF">Login Name<span style="color:#900;">*</span></div>
    <div><input type="text" class="textfield tfont" id="loginname" name="loginname" value="" onBlur="checkName();" style="width:200px; padding:3px; padding-left:10px"><br></div>
    <span id="loginnameErrMsg" ></span>

    <br><div style="font-family:customfont;font-size:16px;color:#FFF">Email ID<span style="color:#900;">*</span></div>
    <div><input type="text" class="textfield tfont" id="email" name="email" value="" onBlur="checkEmail();" style="width:200px; padding:3px; padding-left:10px"><br></div>
    <span id="emailErrMsg" ></span>

    <br><div style="font-family:customfont;font-size:16px;color:#FFF">Confirm Email ID<span style="color:#900;">*</span></div>
    <div><input type="text" class="textfield tfont" id="cemail" name="cemail" value="" style="width:200px; padding:3px; padding-left:10px"><br></div>
    <span id="cemailErrMsg" ></span>

    <br><div style="font-family:customfont;font-size:16px;color:#FFF">Phone</div>
    <div><input type="text" class="textfield tfont" id="phone" name="phone" value="" style="width:200px; padding:3px; padding-left:10px"><br></div>
    <span id="phoneErrMsg" ></span>
    </div>

    <div id="rightaligntextad">
    <br><span style="color:#900; font-size:13px; font-weight:bold; margin-right:10px;">* Fields are mandatory...</span>

    <br><div style="font-family:customfont; font-size:16px; color:#FFF; padding-left:22px; text-align:left">Mobile<span style="color:#900;">*</span></div>
    <input type="text" class="textfield tfont" id="mobile" name="mobile" value="" style="width:200px; padding:3px; padding-left:10px"><br>
    <span id="mobileErrMsg" style="float:left; margin-left:20px"></span>

    <br><div style="font-family:customfont; font-size:16px; color:#FFF; padding-left:22px; text-align:left">Location<span style="color:#900;">*</span></div>
    <input type="text" class="textfield tfont" id="location" name="location" value="" style="width:200px; padding:3px; padding-left:10px"><br>
    <span id="locationErrMsg" style="float:left; margin-left:20px"></span><br><br><br><br>
    </div>
</div>
</div>

<div id="content" style="text-align:left;" class="greygradhor"><span id="accessErrMsg"  style="text-align:center;width:200px;margin-left:205px;"></span>
    <!--End For Message Display-->

    <div id="lastbuttons" style="text-align:right">
      <div>
        <input type="submit" name="submit" id="submit" value="SUBMIT" class="bluegraddialabel"  style="cursor:pointer; height:47px;">
        <input type="reset" name="reset" id="reset" value="RESET" class="bluegraddialabelReset"  style=" cursor:pointer; height:47px;">
    </div>
  </div>
</div>
</div>
</form>
</span>
<!-- End for Create Page --> 

</div>
<!-- End for Body Right Menu-->   

  </div>
</div>


<!-- End ImageReady Slices -->

</center>
</body>
</html>

CSS 请以html中的任何脚本内容或css中的额外类格式忽略不需要的代码。

 @charset "utf-8";
/* CSS Document */



#Table_01 {
    position:relative;
    left:0px;
    top:0px;
    width:1024px;
    height:auto;
    padding-bottom:300px;
}

#formn{
    position:relative;
    height:auto;
}
#topnav {
    position:absolute;
    left:280px;
    top:44px;
    width:744px;
    height:65px;
}
.greygradhor{
    background: #ededed; /* Old browsers */
    background: -moz-linear-gradient(top,  #ededed 0%, #cecece 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#cecece)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ededed 0%,#cecece 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ededed 0%,#cecece 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ededed 0%,#cecece 100%); /* IE10+ */
    background: linear-gradient(top,  #ededed 0%,#cecece 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#cecece',GradientType=0 ); /* IE6-9 */
    box-shadow: 2px 2px 5px #888888;
    font-family:customfont;
    font-size:24px;
    color:#666;
}

#navbar {
    margin-top:0px;
    position:absolute;
    top:56px;
    width:704px;
    height:33px;
    left: 299px;
}
.bluegradhor{
    background: #4acbef; /* Old browsers */
background: -moz-linear-gradient(left,  #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
background: linear-gradient(left,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 */
box-shadow: 2px 2px 5px #888888;
}

#tabname {
}

#mainsec {
    text-align:left;
    position:relative;
    padding:10px 10px 10px;
    padding-top:48px;
    height:auto;
    background: #4acbef; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
    background: linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow: 2px 2px 5px #888888;
}

#leftbarmain {
    position:absolute;
    left:16px;
    top:100px;
    width:243px;
    height:601px;
}
#leftsec {
    position:absolute;
    left:6px;
    top:8px;
    width:231px;
    height:579px;
    z-index:1;
    padding-top:15px;
}
.bluegraddia{
    background: #4acbef; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
    background: linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 2px 2px 5px #888888;

}
.bluegraddialabel{
    background: #29ABE2;
    box-shadow: 2px 2px 5px #888888;
    padding-top:10px;
}

.bluegraddialabel1{
    background: #29ABE2;
    box-shadow: 2px 2px 5px #888888;
    padding-top:10px;
}

.bluegraddialabelReset{
    background: #29ABE2;
    box-shadow: 2px 2px 5px #888888;
    padding-top:10px;
}

#mainright {
    position:relative;
    left:145px;
    top:100px;
    width:740px;
    height:auto;
    padding:10px 10px 10px 10px;
    padding-top:0px;
}

#mainright3 {
    position:relative;
    left:145px;
    top:191px;
    width:740px;
    height:auto;
    padding:10px 10px 10px 10px;
    padding-top:0px;
}

#topsecond {
    position:absolute;
    left:311px;
    top:41px;
    width:410px;
    height:47px;
}

#topsecond ul li#blue{
    color:#ffff;
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}

#topsecond ul li#gray{
    color:#06F;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
0
body{
    text-align:center;
    margin:auto;
}


#topsecond > ul{
    font-size: 1em;
    list-style:none;
}

#topsecond ul li{
    margin:0 25px 0 0;
    padding:10px 35px;
    display:block;
    float:left;
    color:#FFF;
    -webkit-user-select: text;
    -moz-user-select: none;
    user-select: none;

    background: #ededed; /* Old browsers */
    background: -moz-linear-gradient(top,  #ededed 0%, #cecece 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#cecece)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ededed 0%,#cecece 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ededed 0%,#cecece 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ededed 0%,#cecece 100%); /* IE10+ */
    background: linear-gradient(top,  #ededed 0%,#cecece 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#cecece',GradientType=0 ); /* IE6-9 */
    box-shadow: 2px 2px 5px #888888;
}



a{
    text-decoration: none;
    font-family:customfont;
    color:#29abe1;
    font-size:26px;
}
.buttons {
    margin-top:25px;
    z-index:1000;
    float:left;
    height:36px;
    width:230px;
    margin-left:-8px;
    display:block;
    margin-top:10px;
    margin-bottom:5px;
}
#tabname{
    position:absolute;
    left:288px;
    top:133px;
    width:163px;
    height:58px;
    background: #4acbef; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
    background: linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow: 2px 2px 5px #888888;
    padding-top:15px;
}
#tabname1{
    position:absolute;
    left:53px;
    top:134px;
    width:162px;
    height:54px;
    background: #4acbef; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #4acbef 0%, #00a3de 51%, #008cc7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4acbef), color-stop(51%,#00a3de), color-stop(100%,#008cc7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* IE10+ */
    background: linear-gradient(-45deg,  #4acbef 0%,#00a3de 51%,#008cc7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4acbef', endColorstr='#008cc7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    box-shadow: 2px 2px 5px #888888;
    padding-top:15px;
}
.tabname{
     font-family:customfont;
     color:#FFF; 
     font-size:26px
}
.textfield{
    font-family:customfont;
    text-align:left;
    padding-top:25px;
    height:25px;
    color:#333;
}
#textfield1{
    font-family:customfont;
    padding-top:25px;
    height:25px;
    color:#333;
}

#leftaligntext{
    text-align:left;
    position:relative;
    width:320px;

}
#leftaligntext2{
    text-align:left;
    float:left;
    width:320px;

}
#rightaligntext{margin:0;padding:0}

#rightaligntext1{
    text-align:right;
    float:right;
    width:284px;
    height: 293px;
    left: 14px;
    bottom:400px;
}
#rightaligntextad{
    text-align:right;
    position:absolute;
    width:224px;
    height: 217px;
    left: 490px;
    top: -9px;
}
#rightaligntextsub{
    text-align:right;
    position:absolute;
    width:359px;
    height: 324px;
    left: 355px;
    top: -9px;

}
#rightaligntextsub1{
    text-align:right;
    position:absolute;
    width:359px;
    height: 348px;
    left: 355px;
    top: -9px;

}
#content{
    left: 8px;
    width: 700px;
    height: auto;
    padding:30px 10px 10px 10px;
    margin-bottom:10px;
}
#labelbuttoncontent{
    text-align:center;
    margin-left:20px;
    margin-top:40px;
    width:244px;
    height:42px;
    font-family:customfont;
    font-size:22px;
    color:#FFF;
}


#submit{
    width:110px;
    height:38px;
    font-family:customfont;
    font-size:22px;
    color:#FFF;
}
#reset{
    position:relative;
    width:110px;
    height:38px;
    font-family:customfont;
    font-size:22px;
    color:#FFF;
}
.dropshadow{
    box-shadow: 2px 2px 5px #888888;
}
.logo{
    position:absolute;
    left: 14px;
    top: 15px;
    width: 143px;
    height: 107px;
}
input.largerCheckbox
{
width: 20px;
height: 20px;
}
#labelcontent{
    margin-left:-400px;
    width: 257px;
}
#labelcontent2{
    margin-top:-27px;
    margin-left:400px;
    width: 257px;
}
#labeltablelist{
    position:absolute;
    left: 1px;
    width: 763px;
    height: 45px;
    top: -1px;
    text-align:justify;
    }
#labeltablelist1{
    position:absolute;
    left: -12px;
    width: 764px;
    height: 45px;
    top: -1px;
    text-align:justify;
    }
#tablelabels{
    position:relative;
    left: 14px;
    top: 6px;
    width: 673px;
    color:#29abe1;
    height: 45px;
}
#tablelabels1{
    position:absolute;
    left: -1px;
    top: 5px;
    width: 744px;
    height:36px;
    color:#29abe1;
}

#floatlog{
    position:relative;
    float:right;
    width: 400px;
    height: 43px;
    padding-top:5px;
    margin-top:58px;
}

#leftaligntext1{
    text-align:left;
    position:relative;
    width:227px;
    left: 15px;
    top: 29px;
    height: 181px;
}
.radiobutton{
    color:#ffff;
    position:relative;
    left: -1px;
    top: 16px;
    width: 239px;
}

#topsecond ul li{
    /*cursor: pointer;*/
}

#topsecond ul li#blue:hover {
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

#topsecond ul li:active {
    color: #80bed6;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
#righhidable{
    position:relative;
}
.tfont{
    font-family:customfont;
    font-size:16px;
}
#search{
    padding-bottom:5px;
    border-radius:6px;
}





#leftaligntext2sub{
    text-align:left;
    position:relative;
    width:320px;

}

Answer 1

我修复了Opera浏览器的问题，技术如下。

1）首先删除#mainright3，因为#mainright和#mainright3样式都是。 2）你在#mainright中进行如下的小调整，现在很容易在Opera浏览器中工作。

#mainright { position:relative; width:740px; height:auto; padding:0px 10px 10px 10px; margin:0px; float:right;

}

Opera顶部位置渲染问题

1 个答案: