Question

因此我遇到了跨浏览器兼容性方面的一些问题。我不得不承认我不知道如何纠正跨浏览器问题，所以我愿意接受任何建议。

幸运的是，这个例子只影响了一些属性。这些属性是输入和textarea字段。我正在使用谷歌浏览器版本21.0.1180.89。我使用这个浏览器构建网络，但我的机器中有其余的broswers存在问题。

我想知道如何解决跨浏览器兼容性问题：

结果Google Chrome版本21.0.1180.89 :(应该如何看）（Safari看起来一样） enter image description here

结果Firefox版本15.0.1：

enter image description here

结果歌剧版本12.01：

enter image description here

我对所有跨浏览器兼容性代码持开放态度。

很开心，谢谢！

编辑////////////////////////////////////////////// //////////////////////////////////////////

在这里，我根据您的要求放置了必要的代码，以便更好地理解问题。谢谢！

HTML：

<form name="form1" action="<?php echo $config->urls->templates?>../_php/form-to-email.php" method="post">
                            <div id="form_box" class="gradient">
                                <div id="center_box">
                                    <h3>WANT TO BOOK ME?</h3>
                                    <div id="form_data">
                                        <table>
                                            <tr>
                                                <td><input type="text" value="Company name" class="gradient" name="company" /></td>
                                                <td class="tdright"><input type="text" value="Name" class="gradient" name="name" /></td>
                                            </tr>
                                            <tr>
                                                <td><input type="text" value="Telephone" class="gradient" name="telephone" /></td>
                                                <td class="tdright"><input type="text" value="Email" class="gradient" name="email" /></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <!--  <input type="text" id="dateField" name="description" value="Description" onclick="this.value='';"/> -->
                                                    <?php
                                                        $myCalendar = new tc_calendar("date3", true, false);
                                                        $myCalendar->setIcon("../_php/calendar/images/iconCalendar.png");
                                                        $myCalendar->setPath("../_php/calendar/");
                                                        $myCalendar->setYearInterval(2012, 2022);
                                                        $myCalendar->dateAllow('2012-08-30', '2022-08-31');
                                                        $myCalendar->setDateFormat('j F Y'); 
                                                        $myCalendar->writeScript();  
                                                    ?>
                                                </td>
                                                <!-- <td><input type="button" /></td> -->
                                            </tr>
                                        </table>
                                    </div>  
                                    <div id="form_text">
                                        <br>
                                        <textarea rows="7" cols="35" class="gradient" name="message">Your text...</textarea>
                                        <input type="submit" value="SEND" id="input_sub" name="submit" />
                                    </div>
                                    <input type="image" id="input_img" src="<?php echo $config->urls->templates?>_img/submit_button.png" name="submit" />
                                </div>
                            </div>
                        </form>

                        <!-- Form validator -->
                        <script language="JavaScript">
                            /* Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml */
                            var frmvalidator  = new Validator("myemailform");
                            frmvalidator.addValidation("company_name","req","Please provide your company name"); 
                            frmvalidator.addValidation("name","req","Please provide your name"); 
                            frmvalidator.addValidation("message","req","Please provide a small description");
                            frmvalidator.addValidation("email","req","Please provide your email");  
                            frmvalidator.addValidation("email","email","Please enter a valid email address"); 
                        </script>

CSS代码：

/*FORM*/

/*First white box*/
#form_box{
    height: 370px;
    width: 320px;
    font-family: verdana;
    font-size: 1em;
    border-radius: 4px;

    /*Gradient CSS3*/
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(54%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}

/*Gradient CSS3*/
/*CROSS: This is to make it compatible with IE9*/
.gradient {
       filter: none;
}

h3{
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 10px;
}

/*Second box in form*/
#form_data{
    width: 300px;
    height: 105px;
    background-color: #f2f2f2;
    /* this is to stop collapsing margins. This way the margin-top of table works */
    padding-top: 1px;
    margin-top: -1px;
}

#center_box{
    margin-left: 10px;
    width: 300px;
}

input#input_sub{
    margin-top: 8px;
    margin-left: -3px;
}

input#input_img{
    margin-top: 8px;
    margin-left: 10px;
}

table{
    margin-top: 10px;
}

table td{
    padding-left: 10px;
    padding-top: 5px;
}

td.tdright{
        padding-left: 10px;
}

input{
    text-transform: uppercase;
    border: 1px solid #e1e0e0;
    border-radius: 7px;

    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMjElIiBzdG9wLWNvbG9yPSIjZGVkY2RkIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3OCUiIHN0b3AtY29sb3I9IiNkZWRjZGQiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNWI1YjUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(222,220,221,0.5) 21%, rgba(222,220,221,0.5) 78%, rgba(181,181,181,0.5) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(21%,rgba(222,220,221,0.5)), color-stop(78%,rgba(222,220,221,0.5)), color-stop(100%,rgba(181,181,181,0.5))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80b5b5b5',GradientType=0 ); /* IE6-8 */
}

input:not([type=submit]):not([type=image]){ 
/*input[type=text]{*/
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
}

input:not([type=text]){
    background: transparent;
    border: none;
    color: #df0643;
}

/*Third box in form*/
#form_text{
    height: 165px;
    width: 290px;
    margin-top: 2px;
    padding-left: 10px;
    background-color: #f2f2f2;
}

textarea{
    border: 1px solid #e1e0e0;
    padding: 10px;
    border-radius: 7px;

    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMjElIiBzdG9wLWNvbG9yPSIjZGVkY2RkIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3OCUiIHN0b3AtY29sb3I9IiNkZWRjZGQiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNWI1YjUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(222,220,221,0.5) 21%, rgba(222,220,221,0.5) 78%, rgba(181,181,181,0.5) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(21%,rgba(222,220,221,0.5)), color-stop(78%,rgba(222,220,221,0.5)), color-stop(100%,rgba(181,181,181,0.5))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80b5b5b5',GradientType=0 ); /* IE6-8 */
}

Answer 1

路人是对的。我将一些宽度应用于输入：not（type = submit）：not（type：image）和textarea。一旦我这样做，所有浏览器都显示相同的尺寸。

感谢您的帮助！

input和textarea不兼容浏览器

1 个答案: