字段选择HTML,重复错误

时间:2013-10-29 12:15:54

标签: javascript html css

美好的一天,我是巴西人,我有一个问题我正在绞尽脑汁试图理解为什么它在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>

0 个答案:

没有答案