相同代码，相同浏览器，不同机器=不同表格布局

时间：2014-07-27 07:22:35

标签： css ajax html5

我使用PHP / HTML5 / JavaScript / CSS开发了一个Web应用程序......我正在修剪一个我不理解的CSS问题。

  • 在我的电脑上，代码列出了我想要的方式
  • 在我朋友的电脑上，它显示的方式不同
  • 正在使用的Chrome版本相同。

问题是当我更新表单以通过JavaScript / Ajax显示额外的行时。一旦这些行出现在屏幕上，那就糟透了。这是一些照片：

1。）新表单行加载时我朋友的计算机（字段集“拆分事务详细信息”中的问题）： COSMOS Form - New Rows - Wierd

2.。）新表单行加载时的计算机： COSMOS Form - New Rows - Expected

我的PHP / HTML / JavaScript代码片段：

<script>
            function SplitTrans(num) {
                var xmlhttp;

                var n = document.getElementById("numsplit");
                var splitnum = n.options[n.selectedIndex].value;

                document.getElementById("transMasterCat").readOnly = true;
                document.getElementById("transSubCat").readOnly = true;
                document.getElementById("transAmount").readOnly = true;
                document.getElementById("transStudent").readOnly = true;
                document.getElementById("transMemo").readOnly = true;
                document.getElementById("transParticipant").setAttribute('class', 'label-lb');
                document.getElementById("transPaymentMethod").setAttribute('class', 'label-lb');

                if (num == "0")
                {
                    document.getElementById("splitRows").innerHTML = "";
                    document.getElementById("transMasterCat").readOnly = false;
                    document.getElementById("transSubCat").readOnly = false;
                    document.getElementById("transAmount").readOnly = false;
                    document.getElementById("transStudent").readOnly = false;
                    document.getElementById("transMemo").readOnly = false;
                    document.getElementById("transParticipant").setAttribute('class', 'label-l');
                    document.getElementById("transPaymentMethod").setAttribute('class', 'label-l');

                    return;
                }
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("splitRows").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "split-ar.php?splitnum=" + splitnum, true);
                xmlhttp.send();
            }
        </script>
        ...
        <form action="acctsrecv.php" method="post">
            <fieldset class="fieldset">
                <legend class="legend">Add New Accounts Receivable Transaction</legend>
                    <fieldset class="fieldset2">
                        <legend class="legend">Transaction Split Option</legend>
                        <label for "transSplitNum" class="label-l">Number Of Parts: </label><select name='numsplit' id="numsplit"><option value='0'>Select</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option></select><br />
                        <input type="button" class="button" Value="Split" onclick="SplitTrans(1)" /> <input type="button" class="button" Value="Clear" onclick="SplitTrans(0)" /><br />
                    </fieldset>
        ...
        </fieldset>
                <div id="splitRows">

                </div>

根据评论，这是我的CSS：

/* Original CSS assembled by Marko Mihelcic at mcville and James Koster from sixshootermedia*/

html, body {
   margin:0;
   padding:0;
   height:100%;
}

body {
    margin:0;
    font-family:"Trebuchet MS", Arial, Verdana;
    font-size:0.74em;
    color:#555555;
    background-color:#FFFFFF;
    text-align:left;
}

a {
    color:#4D87CE;
    font-weight:bold;
    text-decoration:none;
}

a:hover {
    color:#2a65ad;
}

ol,ul {

}

li {
    list-style-image:url(../images/backgrounds/li.gif);
    line-height:20px;
    text-align:left;
}

.debug { 
    border:1px dashed red;
}

#container {
   min-height:100%;
   position:relative;
   /*border: 1px solid black;*/
}

#menu {
    width:100%;
    padding-top:20px;
    padding-bottom:20px;
    background-color:#FFFFFF;
    margin-bottom:50px;
    color:#FFFFFF;
    text-align:center;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-variant:small-caps;
    background-image:url('../images/backgrounds/back.png');
}

#menu a {
    color:#FFFFFF;
    text-decoration:none;
    padding:10px;
    padding-top:20px;
    padding-bottom:20px;

}

#menu a:hover {
    border-bottom:1px solid #ffffff;
    border-left:1px solid #243482;
    border-right:1px solid #243482;
    padding-left:9px;
    padding-right:9px;
    color:#000000;
    background-color:#FFFFFF;
    background-image:url(../images/backgrounds/hover.jpg);
}

#header {
    width:925px;
    /*height: 92px;*/
    margin:0 auto 0 auto;
    margin-bottom:15px;
    /*border: 1px solid gray;*/
}

#header h1 {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:30px;
    text-transform:uppercase;
    font-weight:normal;
    margin:0;
    padding:0;
    padding-top:5px;
    color:#253183;
    margin-bottom:10px;
    text-align:left;
}

#header h2 {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:15px;
    text-transform:uppercase;
    text-align:right;
    font-weight:normal;
    margin:0;
    padding:0;
    color:#000000;
    border-bottom:1px solid #eeeeee;
}

#content {
    width:925px;
    margin:0;
    text-align:left;
    padding-bottom:54px; /* Total height of the footer */
    overflow: auto;
    /*border: 1px solid green;*/
}

/*.introduction {
    font-family:Helvetica, Arial, sans-serif;
    line-height:20px;
    font-size:12px;
    color:#99B198;
    text-indent:25px;
    background-image:url(../images/backgrounds/desc.jpg);
    background-position:bottom left;
    padding-left:0;
    padding-right:200px;
    padding-bottom:35px;
    padding-top:0;
    background-repeat:no-repeat;
}*/

.logo {
    float:left;
    margin-right:30px;
    margin-bottom: 5px;
}

.clearer {
    clear:both;
}

#sidebar {
    width:150px;
    float:right;
    font-size:95%;
    color:#253183;
    text-align:left;
    /*border: 1px solid blue;*/
}

#sidebar .badlogin {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:12px;
    text-align: center;
    color: red;
}

#sidebar h1 {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:20px;
    text-transform:uppercase;
    font-weight:normal;
    border-bottom:1px solid #eeeeee;
    color:#253183;
    text-align:right;
}

#sidebar .fieldset {
    //border: 1px solid black;
    padding: 2px;
    border: none;
    width:131px;
}

#sidebar .input {
    border: 1px solid #006;
    background: #ffc;
    margin-bottom: 5px;
}

#sidebar .button {
     border: none;
     background: url('../images/backgrounds/up.png') no-repeat top left;
     padding: 2px 8px;
     margin-top: 5px;
 }

#sidebar .button:hover {
     border: none;
     background: url('../images/backgrounds/pressed.png') no-repeat top left;
     padding: 2px 8px;
 }

#sidebar .label {
     display: inline;
     width: 131px;
     float: left;
     margin: 2px 4px 6px 4px;
     text-align: left;
     border: none;
 }

#sidebar br { 
    clear: left;
}

.submenu {
}

.submenu a {
    display:block;
    width:95%;
    background-image:url('../images/backgrounds/submenua.png');
    background-position:right;
    background-repeat:no-repeat;
    padding:5px;
    padding-right:0;
}

.submenu a:hover {
    background-color:#eeeeee;
    background-image:url('../images/backgrounds/submenua.gif');
    background-repeat:no-repeat;
}

#mainbar {
    margin-right:155px;
    padding-right:5px;
    background-image:url('../images/backgrounds/mainbar.jpg');
    background-position:top right;
    background-repeat:no-repeat;
    padding-bottom: 10px;
    /*border: 1px solid red;*/
}

#mainbar ol {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:12px;
}

#mainbar ol li {
    list-style: decimal outside none;
}

#mainbar ul {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:12px;
}

#mainbar ul li {
    list-style: square outside none;
}

#mainbar .nologin {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:14px;
    text-align: center;
    color: red;
}

#mainbar .warning {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:20px;
    font-weight: bold;
    text-align: center;
    color: red;
}

#mainbar h1 {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:25px;
    text-transform:uppercase;
    font-weight:normal;
    border-bottom:1px solid #eeeeee;
    color:#253183;
}

#mainbar .h1a {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:20px;
    //text-transform:uppercase;
    font-variant:small-caps;
    font-weight:normal;
    border-bottom:1px solid #253183;
    color:#253183;
}

#mainbar h2 {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:15px;
    text-transform:uppercase;
    text-align:left;
    font-weight:normal;
    margin:0;
    padding:0;
    color:#253183;
    border-bottom:1px solid #eeeeee;
}

#mainbar .h2a {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:15px;
    text-transform:uppercase;
    text-align:left;
    font-weight:normal;
    margin:0;
    padding:0;
    color:#253183;
    border-bottom:1px solid #253183;
}

#mainbar h3 {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    color:#253183;
}

#mainbar .h3a {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    color:#253183;
    font-weight:normal;
}

#mainbar p {
    padding:5px;
    line-height:15px;
    font-size: 13px;
    font-weight:normal;
}

#mainbar figcaption {
    font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
    font-size:13px;
    font-style: italic;
    font-weight:bold;
}

#mainbar .articleimg {
    float:right;
    padding:5px;
    border:1px solid #eeeeee;
    margin-left:20px;
    margin-top:20px;
    margin-bottom:20px;
}

#mainbar .articleimg2 {
    padding:5px;
    border:1px solid #eeeeee;
    margin-left:20px;
    margin-top:20px;
    margin-bottom:25px;
}

#mainbar .table {
    border-collapse:collapse;
    border-spacing:0;
    border:2px solid #253183;
}

#mainbar .th {
    font-size:14px;
    font-weight:bold;
    background: #253183;
    color: #FFFFFF;
    padding:10px 5px;
    border: 1px solid black;
    border-bottom: 2px solid black;
    overflow:hidden;
    word-break:normal;
}

#mainbar .td1 {
    font-size:14px;
    font-weight: normal;
    color: #000000;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    border-color: black;
    overflow:hidden;
    word-break:normal;
}

#mainbar .td2 {
    font-size:14px;
    font-weight: normal;
    background: #BBD9F3;
    color: #000000;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    border-color: black;
    overflow:hidden;
    word-break:normal;
}

#mainbar .fieldset {
    border: 1px solid black;
    width:740px;
}

#mainbar .fieldset2 {
    border: 1px solid black;
    /*width:740px;*/
}

#mainbar .legend {
    font-size:14px;
    font-weight: bold;
}

#mainbar .label-l {
     display: inline;
     width: 131px;
     float: left;
     margin: 2px 4px 6px 4px;
     text-align: left;
     //border: 1px solid red;
 }

 #mainbar .label-lb {
     display: inline;
     width: 131px;
     float: left;
     margin: 2px 4px 6px 4px;
     text-align: left;
     font-weight: bold;
     //border: 1px solid red;
 }

#mainbar .input-l {
    border: 1px solid #006;
    background: #ffc;
    margin-bottom: 5px;
    float: left;
}

#mainbar .label-r {
     display: inline;
     width: 131px;
     float: right;
     margin: 2px 4px 6px 4px;
     text-align: left;
     //border: 1px solid red;
 }

#mainbar .label-rb {
     display: inline;
     width: 131px;
     float: right;
     margin: 2px 4px 6px 4px;
     text-align: left;
     font-weight: bold;
     //border: 1px solid red;
 }

#mainbar .input-r {
    border: 1px solid #006;
    background: #ffc;
    margin-bottom: 5px;
    float: right;
}

#mainbar .label-l2 {
     display: inline;
     width: 240px;
     float: left;
     margin: 2px 4px 6px 4px;
     text-align: left;
     //order: 1px solid red;
 }

#mainbar .input-l2 {
    border: 1px solid #006;
    background: #ffc;
    margin-bottom: 5px;
    float: left;
}

#mainbar .label-r2 {
     display: inline;
     width: 240px;
     float: right;
     margin: 2px 4px 6px 4px;
     text-align: left;
     //border: 1px solid red;
 }

#mainbar .input-r2 {
    border: 1px solid #006;
    background: #ffc;
    margin-bottom: 5px;
    float: right;
}

#mainbar .txta {
    width: 704px;
    height: 120px;
    border: 1px solid black;
    padding: 5px;
    float: left;
}

#mainbar .txta2 {
    width: 704px;
    height: 36px;
    border: 1px solid black;
    padding: 5px;
    float: left;
}

#mainbar .txta3 {
    width: 680px;
    height: 120px;
    border: 1px solid black;
    padding: 5px;
    float: left;
}

#mainbar .button {
     border: none;
     background: url('../images/backgrounds/up.png') no-repeat top left;
     padding: 2px 8px;
     margin-top: 5px;
}

#mainbar .button:hover {
     border: none;
     background: url('../images/backgrounds/pressed.png') no-repeat top left;
     padding: 2px 8px;
 }

#mainbar .submit {
     clear: both;
     postition: relative;
     left:341px;
 }

 #mainbar .center {
     margin-left: auto;
     margin-right: auto;
 }

#mainbar br { 
    clear: left;
}

#footer {
    /* width:80%; */
    background-color:#253183;
    border-top:1px solid #81C0FF;
    border-bottom:5px solid #253169;
    padding-top:5px;
    padding-bottom:5px;
    color:#FFFFFF;
    position:relative;
    margin-top: -54px; /* Total height of the footer */
    clear: both;
    bottom:0;
    width:100%;
    height:38px;   /* Height of the footer */
    text-align: center;
}

#footer a {
    color:#81C0FF;
}

#footer a:hover {
    color:#AFD7FF;
}

有人可以帮助我理解为什么会这样，以及如何解决它？

非常感谢你!!

0 个答案:

没有答案
相关问题
最新问题