因此，我在跨浏览器兼容性方面遇到了一些问题。我不得不承认我不知道如何纠正跨浏览器问题，所以我愿意接受任何建议。
幸运的是，这个例子只影响了一些属性。这些属性是输入和文本区域字段。我正在使用谷歌浏览器版本 21.0.1180.89。我用这个浏览器构建了网络，但我的机器上可用的其他浏览器有问题。
我想知道如何解决这个跨浏览器兼容性问题：
结果 Google Chrome 版本 21.0.1180.89：（它应该看起来如何）（Safari 看起来一样）
结果 Firefox 版本 15.0.1：
结果歌剧版本 12.01：
我对任何跨浏览器兼容性代码持开放态度。
非常感谢！
编辑 ///////////////////////////////////////////////// /////////////////////////////////
在这里，我根据您的要求放置了必要的代码，以更好地理解问题。谢谢！
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 */
}