Question

我创建了dhtmlx布局并附加了dhtmlxform。在该窗体上添加了4个方向按钮和3 - 加号，减号，刷新按钮。它的工作方式如屏幕截图所示，但加号和减号按钮无法正常工作，如图所示在IE11 windows 10中的另一个屏幕截图中。这个问题的解决方案是什么？

            <!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>

Answer 1

看起来它与img元素的大小和png图像以及图像的浏览器缩放有关。从我看到的情况来看，我看起来像是你的图标上的线条，或者当它们被缩小时会消失或变得模糊。

你有30x30px图标和10px-14px img元素加载这些图标。消失的图标将加载到最小的img元素（10px宽度高度）中，如果将img元素的大小从10增加到11px，它们将变为可见，这是一个演示： http://snippet.dhtmlx.com/0284599ed

作为解决方案，我建议您决定图像大小并准备合适的图标，以便浏览器不需要缩放它们

带有加号和减号png图像的dhtmlx按钮在窗口10中的IE11浏览器中不起作用

1 个答案: