これにより、ブラウザ間の互換性に問題が発生します。クロスブラウザの問題を修正する方法がわからないことを認めなければならないので、どんな提案も受け入れます。
この例は、幸いなことに一部のプロパティにのみ影響を与えています。これらのプロパティは、inputフィールドとtextareaフィールドです。私はグーグルクロームバージョン21.0.1180.89を使用しています。このブラウザを使用してWebを構築していますが、自分のマシンで使用できる残りのブラウザに問題があります。
クロスブラウザ互換性のこの問題に対処する方法を知りたいです：
結果GoogleChromeバージョン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 */
}