美好的一天，我是巴西人，我有一个问题我正在绞尽脑汁试图理解为什么它在Google Chrome和Firefox中完美运行并且Internet Explorer遇到麻烦，我会更好地解释一下！
Google Chrome就是这样的：
http://i.stack.imgur.com/G4Khf.png
在firefox和Internet Explorer中看起来像这样：
http://i.stack.imgur.com/D1Flc.png
是浏览器的问题，我已经尝试了几种方法来解决这个问题。
解释点击更多产品时应该做什么应该复制选择字段。
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/css_browser_selector.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.2.2.js"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script>
$(document).ready (function () {
$('.btnAdd').click (function () {
$('.buttons').append('<div><style> .cmf-skinned-select{background-image:url(images/option.png) !important;width:252px !important;height: 29px !important; z-index:10;} .cmf-skinned-text{margin-top: 6px !important;} #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: red; } #selectable { list-style-type: none; margin: 0; padding: 0; width:400px; }#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }select{width: 249px;border: 0;}.dragme{position:relative;cursor: pointer !important;} .select-skin { width: 249px !important; position: absolute; margin-top: 6px; float: left; z-index:10; } .select-skin-mask {background: transparent !important;}.select-skin-text-clip {margin-right: 35px;overflow: hidden !important;background: transparent !important}.prod .select-skin{ float: left; width: 277px !important;height: 10px;}.gecko #alg{margin-left:-135px} .ie #alg{margin-left:-135px;width:62px;}#alg{position: absolute;width: 64px;border: 0;margin-top: 19px !important;margin-left: 95px;height: 28px;background-image: url(images/codarea.png);} div.styled { float:left; overflow:hidden; padding:0; margin:0; width:12em; border-radius:2px;} div.styled select { -webkit-appearance: none; border:none; padding:0.3em 0.5em; } option{color:red;} </style><div> <span id="produto">Produto</span> <span id="qtd" style="margin-left: 284px !important; float:left;">Quant.</span> <br> <span id="linha_orcamento" style="float: left;"><img src="images/orcamento_linha.png" alt=""> </span> <div class="styled" style="width: 259px !important;height: 49px;" ><select name="produto[]" class="select" id="select1" style="float: left;margin-top:20px;background-image: url(images/option.png) !important;height: 29px;width: 252px;margin-left: 7px;"> <option value="0">SELECIONE O PRODUTO</option> <option value="Barra Chata">Barra Chata</option> <option value="Cantoneira">Cantoneira</option> <option value="Chapa fina frio">Chapa fina frio</option> <option value="Chapa Fina Quente">Chapa Fina Quente</option> <option value="Chapa Galvaznizada">Chapa Galvaznizada</option> <option value="Chapa Grossa">Chapa Grossa</option> <option value="Chapa Xadrez">Chapa Xadrez</option> <option value="Ferro TEE">Ferro TEE</option><option value="Perfil UDC">Perfil UDC</option> <option value="Perfil UDCE">Perfil UDCE</option> <option value="Quadrado Laminado 1020/1045">Quadrado Laminado 1020/1045</option> <option value="Quadrado Trefilado 1020/1045">Quadrado Trefilado 1020/1045</option> <option value="Redondo Laminado 1020/1045">Redondo Laminado 1020/1045</option> <option value="Tubo Quadrado">Tubo Quadrado</option><option value="Tubo Redondo">Tubo Redondo</option> <option value="Tubo Retangular">Tubo Retangular</option><option value="Viga I">Viga I</option> <option value="Viga U">Viga U</option> <option value="Viga WH">Viga WH</option> </select></div><?php echo ($_POST['produto'])?><input type="text" name="qtd[]" class="input_qtd" id="alg" value="<?php echo $_POST['qtd'];?>"> <input type="button" class="btnRemove" style="background: url(images/-.png);width: 54px;border: 0;height: 14px;margin-left: 169px;margin-top: 22px;margin-bottom: 9px;cursor: pointer;"> <span style="color: #5c5858 !important;font-family: Futura-Bold !important;font-size: 12px !important;float:left;margin-top: 66px;margin-left: -228px;">observações</span> <span id="linha_orcamento" style="margin-top: 38px;margin-left: -259px;float: left;"><img src="images/orcamento_linha.png" alt=""> </span><span style="height:18px;"><textarea rows="0" cols="0" name="observacoes[]" class="observa" style="background-image: url(images/orcamento_obs.png);border: 0;width: 405px;height: 67px;z-index: 20;margin-left: 7px;margin-top:21px;"> <?php echo $_POST['observacoes'];?> </textarea> </div>'); // end append
$('div .btnRemove').last().click (function () {
$(this).parent().last().remove();
}); // end click
}); // end click
}); // end ready
</script>
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".input_codarea").mask("(99)");
$(".input_telefone").mask("9999-9999?9").live("focusout", function (event) {
var target, phone, element;
target = (event.currentTarget) ? event.currentTarget : event.srcElement;
phone = target.value.replace(/\D/g, "");
element = $(target); element.unmask();
if (phone.length > 8) {
element.mask("99999-999?9");
} else {
element.mask("9999-9999?9");
}
});
});
</script>
<style>
div.styled {
overflow:hidden; /* this hides the select's drop button */
padding:0;
margin:0;
float: left !important:
/* this is the new drop button, in image form */
width:12em; border-radius:2px;
}
div.styled select {
/* this percentage effectively extends the drop down button out of view */;
/*background-color:transparent /* this hides the select's background making any styling visible from the div */;
/*background-image:none; */
-webkit-appearance: none /* this is required for Webkit browsers */;
border:none;
box-shadow:none;
padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}
option{color:red;}
</style>
<div id="meio_orcamento"><?php
if(isset($_POST['enviarorcamento'])){
$empresa =$_POST["empresa"];
$nome = $_POST["nome"];
$email = $_POST["email"];
$codarea = $_POST["codarea"];
$telefone = $_POST["telefone"];
$produto =$_POST["produto"];
$qtd =$_POST["qtd"];
$observacoes = $_POST["observacoes"];
$status = $_POST["autorizo"]; //,'".$codarea."'
$for = $_POST["for"];
$observacoes = trim($_POST["observacoes"]);
if($status == 1){
$status ='sim';
}
else{
$status = 'nao';
}
$data = date('Y-m-d H:i:s');
if(empty($empresa)){
echo '<div style="font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira o nome da Empresa!</span></div>';
echo '<br/>';
}
elseif(empty($nome)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira seu nome!</span></div>';
echo '<br/>';
}
elseif(!filter_var($email , FILTER_VALIDATE_EMAIL)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira seu Email!</span></div>';
echo '<br/>';
}
elseif(empty($codarea)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira o DDD!</span></div>';
echo '<br/>';
}
elseif(empty($telefone)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira seu telefone!</span></div>';
echo '<br/>';
}
else{
$string = "INSERT INTO orcamento (empresa, nome, email, codArea, telefone) VALUES
('".$empresa."','".$nome." ','".$email."','".$codarea."','".$telefone."')";
mysql_query($string) or die(mysql_error());
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
/*echo'<pre>';
print_r($_POST);*/
echo $outra.'<br>';
for($i=0;$i < count($produto);$i++){
echo 'Produto: -- '.$produto[$i].'<br />';
echo 'quantidade: --'.$qtd[$i].'<br />';
echo 'Observação:--'.$observacoes[$i].'<br />';
}
?>
<div id="nada">
</div>
<div style="color:#5c5858;font:12px futura-bold;text-align: center;margin-right: 273px;">
Para entrar em contato com a Oeste Ferro ou receber <br>
nossos informativos, preencha os campos abaixo:</div>
<div id="alinha_contato">
<div id="nomes_orcamento">
<div class="n1" style="margin-left: 16px;margin-top: 24px;">Empresa:</div>
<div class="n1"style="margin-left:29px;;margin-top: 33px;">Nome:</div>
<div class="n1" style="margin-left:16px;margin-top: 31px;">E-mail:</div>
<div class="n1" style="margin-left:30px;margin-top: 34px;">Tel.:</div>
</div>
<div id="formulario">
<form method="post" name="form1" onsubmit="return valida();">
<div id="empresa">
<input type="text" name="empresa" class="input_nome" value="<?php echo $_POST['empresa'];?>"><img src="images/nome.png" alt="">
</div>
<div id="nome_orc">
<input type="text" name="nome" class="input_nome" value="<?php echo $_POST['nome'];?>"><img src="images/nome.png" alt="">
</div>
<div id="email">
<input type="text" name="email" class="input_email" value="<?php echo $_POST['email'];?>"><img src="images/email.png" alt="">
</div>
<div id="codarea">
<input type="text" name="codarea" class="input_codarea" value="<?php echo $_POST['codarea'];?>"><img src="images/codarea.png" alt="">
</div>
<div id="telefone">
<input type="telefone" name="telefone" class="input_telefone" value="<?php echo $_POST['telefone'];?>"><img src="images/telefone.png" alt="">
</div>
<div id="produto_orcamento">
<div id="camposTexto" style="color:#5c5858;font:12px futura-bold;">
<div id="pd" style="margin-top: 20px;"><div id="produto">Produto</div> <div id="qtd">Quant.</div></div>
<div id="linha_orcamento" style="margin-top:2px;" ><img src="images/orcamento_linha.png" alt=""></div>
<div style="margin-top: 20px;margin-left: 7px;">
<div id="list_produtos"> <style type="text/css">
.cmf-skinned-select{background-image:url(images/option.png) !important;width:252px !important;height: 29px !important;}
.ie .cmf-skinned-select{background-image:url(images/option.png) !important; z-index:20;width:252px !important;height: 29px !important;}
.cmf-skinned-text{margin-top: 6px !important;}
.ie .cmf-skinned-text{margin-top: 6px !important;}
#feedback { font-size: 1.4em; }
.ie #feedback { font-size: 1.4em; }
#selectable .ui-selecting {/* background: #FECA40;*/ }
.ie #selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: red;
.ie #selectable .ui-selected { background: #F39814; color: red; }
#selectable { list-style-type: none; margin: 0; padding: 0; width:400px;
.ie #selectable { list-style-type: none; margin: 0; padding: 0; width:400px; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
.ie #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<style> select{width: 249px;border: 0;}
.ie select{width: 249px;border: 0;background: transparent;}
.dragme{position:relative;cursor: pointer !important;}
.ie .dragme{position:relative;cursor: pointer !important;}
/* .select-skin {
width: 249px !important;
position: absolute;
margin-top: 6px;
float: left;
}
.ie .select-skin {
width: 249px !important;
position: absolute;
margin-top: 6px;
float: left;
}
.ie .select-skin-mask {
background: transparent !important;
}
.select-skin-mask {
background: transparent !important;
}
.ie .select-skin-mask {
background: transparent !important;
}
.select-skin-text-clip {
margin-right: 35px;
overflow: hidden !important;
background: transparent !important;
}
.ie .select-skin-text-clip {
margin-right: 35px;
overflow: hidden !important;
background: transparent !important;
}
.prod .select-skin{
float: left;
width: 277px !important;
height: 10px;
}
.ie .prod .select-skin{
float: left;
width: 277px !important;
height: 10px;
}
.ie select {-webkit-appearance: none;color:#5c5858;font:12px futura-bold!important;
padding:4px;
line-height: 21px;
}*/
div.styled {
overflow:hidden!important; /* this hides the select's drop button */
padding:0!important;
margin:0!important;
width:252px !important;
/* this is the new drop button, in image form */
width:12em; border-radius:2px!important;
}
.ie div.styled {
overflow:hidden!important; /* this hides the select's drop button */
padding:0!important;
margin:0!important;
width:252px !important;
/* this is the new drop button, in image form */
width:12em; border-radius:2px!important;
}
.ie div.styled select {
background-color:transparent /* this hides the select's background making any styling visible from the div */!important;
background-image:none!important;
-webkit-appearance: none /* this is required for Webkit browsers */!important;
border:none!important;
padding:0.3em 0.5em !important; /* padding should be added to the select, not the div */
}
option{color:red;}
</style>
<div class="styled">
<select name="produto[]" id="lprodutos" class="select">
<!--
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
for($i=0;$i < count($produto);$i++){
echo $produto[$i] ;
} --> <option value="Cliente não selecionou o produto">Selecione o produto</option>
<option value="Barra Chata">Barra Chata</option>
<option value="Cantoneira">Cantoneira</option>
<option value="Chapa fina frio">Chapa fina frio</option>
<option value="Chapa Fina Quente">Chapa Fina Quente</option>
<option value="Chapa Galvaznizada">Chapa Galvaznizada</option>
<option value="Chapa Grossa">Chapa Grossa</option>
<option value="Chapa Xadrez">Chapa Xadrez</option>
<option value="Ferro TEE">Ferro TEE</option>
<option value="Perfil UDC">Perfil UDC</option>
<option value="Perfil UDCE">Perfil UDCE</option>
<option value="Quadrado Laminado 1020/1045">Quadrado Laminado 1020/1045</option>
<option value="Quadrado Trefilado 1020/1045">Quadrado Trefilado 1020/1045</option>
<option value="Redondo Laminado 1020/1045">Redondo Laminado 1020/1045</option>
<option value="Tubo Quadrado">Tubo Quadrado</option>
<option value="Tubo Redondo">Tubo Redondo</option>
<option value="Viga I">Viga I</option>
<option value="Viga U">Viga U</option>
<option value="Viga WH">Viga WH</option>
</select>
</div>
</div>
<div id="imgqtd">
<input type="text" name="qtd[]" class="input_qtd"
style="position:absolute;width: 60px;border: 0;height: 24px;background-color: transparent;"
value="<?php
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
for($i=0;$i < count($produto);$i++){
echo $qtd[$i] ;
} ?> ">
<img src="images/codarea.png" alt="">
</div>
<div id="excluir">
<a href="#" ><img src="images/-.png" alt="" onclick="removerCampos(this);">
</a>
</div>
</div>
<div id="obs">observações</div>
<div id="linha_orcamento" style="margin-top:2px;">
<img src="images/orcamento_linha.png" alt="">
</div>
<div id="observacoes" style="height:18px;">
</div>
<textarea rows="0" cols="0" name="observacoes[]" class="observa"
style="background-image: url(images/orcamento_obs.png);border: 0;width: 405px;height: 67px;z-index: 20;margin-left: 7px;margin-top:2px;">
<?php
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
for($i=0;$i < count($produto);$i++){
echo $observacoes[$i] ;
} ?> </textarea>
</div>
<div class="buttons">
</div>
<div id="btnAdd" name="add_input" style="margin-top: 11PX;">
<a href="#" class="btnAdd" style="cursor:pointer;">
<span style="color: #5c5858 !important;font-family: Futura-Bold !important;font-size: 12px;margin-top: 6px;margin-left: 8px;">+ Produtos</span> </a></div>
<div id="linha_produto"><img src="images/produtos_linha.png" alt=""></div>
<div class="enviar_orcamento">
<input type="hidden" name="enviarorcamento">
<input type="image" src="images/enviar_orcamento.png" value="enviar" alt="" onsubmit="return valida();"/>
</div>
</div>
</div>
</form>
</div> </div>