2017-03-14 3 views
0

J'ai créé la mise en page dhtmlx et attaché dhtmlxform sur ce.Il y a 4 boutons de directions et 3 - plus, moins, rafraîchir les boutons ajoutés sur ce formulaire.Il fonctionne comme indiqué dans la capture d'écran, mais les boutons de signe plus et moins ne fonctionnent pas comme le montre une autre capture d'écran dans IE11 Windows 10. Quelle est la solution à ce problème? des éléments imgLes boutons dhtmlx avec les images plus et moins png ne fonctionnent pas dans le navigateur IE11 dans la fenêtre 10

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

  <!DOCTYPE html> 
      <html> 

      <head> 
       <title>Object-based init</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
       <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
       <link rel="stylesheet" type="text/css" href="javascript\dhtmlx\dhtmlx_pro_full/dhtmlx.css"/> 
       <script src="javascript\dhtmlx\dhtmlx_pro_full/dhtmlx.js"></script> 


       <style> 


        html,body { 
         overflow: hidden; 
         height:100%; 
         min-height: 100%; 
         margin-top: 0px; 
        } 

        object { 
         height:100% 
        } 

        table { 
         margin: 0px; 
        } 



        div.dhx_toolbar_material div.dhx_toolbar_btn input.dhxtoolbar_input { 
         margin: 4px 4px; 
         padding: 4px 2px 3px 2px; 
        } 

        div.dhxform_obj_material div.dhxform_item_absolute div.dhxform_btn{ 
         height:24px; 
         width:24px; 
         border: thin solid ligthgray; 
         border-radius: 3px; 
         text-align: center; 
        } 


        .dhtmlx_message_area { 
         left:35%; 
         margin-top:200px; 
        } 
       </style> 
      </head> 
      <body> 
         <div id="mainScreen" style="height:100%;width:100%;position:absolute;" > 
          <svg id="diagramLayout" style="height:100%;width:100%;position:absolute;"> 
          </svg> 
          <div id="sample"> 
          <div id="objId1" style="height: 100%"></div> 
          </div> 
         </div> 
         <div id="hidden" style="display:none;"><canvas id='canvas' ></canvas></div> 

         <div id="objId" style="width:100px; height:30px;position:relative;"></div> 


         <script> 

          var graphCell; 


          graphLayout = new dhtmlXLayoutObject("mainScreen", "1C"); 

          graphCell = graphLayout.cells('a'); 

          loadForm(); 
          function loadForm(){ 
           navigationString = [ 
            { type:"button" , name:"up", value:"<img src='images/icons/up-arrow.png' style='position:absolute;width:15px;height:15px;left:4px;top:4px'>", width:"24", height: 24, inputLeft:36, inputTop:-118+window.innerHeight, position:"absolute" }, 
            { type:"button" , name:"down", value:"<img src='images/icons/down-arrow.png' style='position:absolute;width:14px;height:14px;left:4px;top:6px'>", width:"24", inputLeft:36, inputTop:-60+window.innerHeight, position:"absolute" }, 
            { type:"button" , name:"left", value:"<img src='images/icons/left-arrow.png' style='position:absolute;width:14px;height:14px;left:3px;top:5px'>", width:"24", inputLeft:10, inputTop:-89+window.innerHeight, position:"absolute" }, 
            { type:"button" , name:"right", value:"<img src='images/icons/right-arrow.png' style='position:absolute;width:14px;height:14px;left:5px;top:5px'>", width:"24", inputLeft:61, inputTop:-89+window.innerHeight, position:"absolute" }, 
            { type:"button" , name:"add", value:"<img src='images/icons/add.png' style='position:absolute;width:10px;height:10px;top:6px;left:6px'> <span style='margin-left:13px;'></span>",height:"5", width:"24", inputLeft:99, inputTop:-118+window.innerHeight, position:"absolute" }, 
            { type:"button" , name:"refresh", value:"<img src='images/icons/refresh.png' style='position:absolute;width:11px;height:11px;top:6px;left:5px'> <span style='margin-left:13px;'></span>", width:"24", inputLeft:99, inputTop:-89+window.innerHeight, position:"absolute" }, 
            { type:"button" , name:"substract", value:"<img src='images/icons/substract.png' style='position:absolute;width:10px;height:10px;top:6px;left:5px'> <span style='margin-left:13px;'></span>", width:"24", inputLeft:99, inputTop:-60+window.innerHeight, position:"absolute" } 
           ]; 

           navigationForm = new dhtmlXForm("objId", navigationString); 
           } 

         </script> 
      </body> 
      </html> 

Répondre

0

On dirait que cela a à voir avec des tailles et les images png et la mise à l'échelle du navigateur des images. De ce que je vois, je ressemble à des lignes sur vos icônes ou disparaît ou devient floue quand ils sont trop réduits.

Vous disposez d'icônes 30x30px et d'éléments img 10px-14px qui chargent ces icônes. Les icônes qui disparaît sont chargés dans les plus petits éléments img (10px hauteur de largeur), ils deviennent visibles si vous augmentez la taille des éléments img de 10 à 11px, voici une démonstration: http://snippet.dhtmlx.com/0284599ed

Comme solution, je vous suggère décider de la taille des images et préparer les icônes appropriées afin que le navigateur n'ait pas besoin de les mettre à l'échelle