开发者工具中background-image重复显示问题
发布于 5 年前 作者 fanxia 7396 次浏览 来自 问答

Bug情况:

当在wxss中为<input>定义了background-image并使用url(data:image/png;base64,…)时,图片可以正确显示,但会重复两次。这个问题只在input标签中测试过,别的情况不知道是不是也这样,且只在开发者工具中出现,真机测试时没有问题。具体情况见代码和截图:

wxml:

<input type="text" name="keywords" maxlength="50" placeholder-class="placeholder" placeholder="快速搜索动作..." bindinput="searchExerciseByKeywords" />

wxss:

.searcharea input {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 5px;
  overflow: hidden;
  height: 36px;
  vertical-align: middle;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMzRTBEOEMyQTUwMDExRTk5QUZCODZCMTVDMTQ0RkZDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMzRTBEOEMzQTUwMDExRTk5QUZCODZCMTVDMTQ0RkZDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzNFMEQ4QzBBNTAwMTFFOTlBRkI4NkIxNUMxNDRGRkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzNFMEQ4QzFBNTAwMTFFOTlBRkI4NkIxNUMxNDRGRkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6635ctAAAEiUlEQVR42tRaaWxNQRSetoil9jWx1V57qKglqCXCD2qJJYiiP0pCgtQPYoktxL6EiPhBSKgtglQEsUdRu9oaBNFoUmpL/aD4jnduMj1v3n19Wzu+5Mt7c+59991v5szcOefcqOzsbBUiqoB9wN5gF7AZ2BCMBWPAIrAQzANzwLvgDfClCgMSEhL+fVYI4RrDwYn8Wd/lvNpgY7ATOFSzk5iDzIJQBUUH8Zvx4E0wE5zqR4QbaAS3ga/A9WCDUIQEMiLdwY1gkss55D654AfwE/gLrAY2AuPAeEPnVQfTwTRwMYuLmJB07jUTroIZ/PmEb94XGvN8GgaOAusIQVvBZHAyd0ZYXSvDh4h9YA+wP7gDfOhHBOE9eARMBVuCc8G34pxB4FOwbziFXOI5oeMKmAhOA++E4NZfeARag2vEsVrgNR65kIXQDQ8QtmVsu6XCh5/gIrAX+FocOwP2C0XIUcMFRoMrVORAK2FHnmuyQ5sHI4T8dqyw0Up1QkUeP3jOXRb284EKIeWbhS3ZcOFII4knvAOaR9sDEXJYtMmVTqrywUDwt9aeza7nVwitED21dg5P7vJCPpgibHtKI2STODZBlT8OiBWSVrYENyF0QnvNfopHxAakifYSNyEzhX2hsgf3xaiM4B21UchozfbIotFwsEPc8xiTEHKrGpptv7IPJ8QKNtAkRG5DLlgo5CsHYg76mIR00Nqf2SdtxHXtewsZ0EXzU9PBCzGENuGJaLeRQuqIeMFWyECrnhRSVfiirfhuCJFLCInR2sUWC5HRZ0UppEhrx1ospJpoF0kh33z5nWWQaaePUogeXra1WEgr0X4nheRq7Sac3bARPbTvlIJ9JYXIREI/S4XoO5C7cvKTkEuGJINt6CuedxdNW5RCzlQ4GCnXaAtjkmO+tvG7NVsUuMAiETXBKVqbMprPfAnJEMtwunzglCPWcuc6WO8WIdLEWa3ZqXizywIRcSJ6LeA43jX5sEGMygzlXkIoC5wW7TmlyaLQPmuaOJ5pio/LCDtVyTwW1QgPlUYI4bgqmZAjF6OcbKUyFkE9P0tr/1HeaVxXIYoD+3wRwNxWnlR/WaCp8q5aDVbedRS/Qor5AfRTs1G19oHYJkQKpgg10d+PfJUVqHTcX1y0GY9MpJ8xFKVOEjYqBC0PRgghC+ymvEvH65SnUjU2TG4UZ7BTyXqesC012EolxHmKdlbeZQWq8FIx6B44XyQw/IFC62S+2TccRqQYzttiGAXKT6eaLhoVwJsPVDpe6XL8AbveC77BT7zaOOXpljzXKONfV/z2s8syv8kwEuO4I4N682GV8lRkqZdMmfquzGCw1+XYfF4xp2s2uo8hSksmBvrmw3PleW2DumGPCrAWbsA53hDO83PeDGcENFA5rlcwrmVCZeXJjiexy1CoXMMlC0Lh6X2+CZp3gSbLaQQGiaW6E9zraVQY3g6SuSaqQzbkSV2R929FPKnzwvAfWeK5Qrm4LhVUeEE3/ZgZyWiRrh/PbfKAs9Hq/0Mxj4ieRWn3Pwpx3Kkn74jpgZ36V4ABAF6N5zWbAZM0AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: 10px 5px;
  padding: 0 10px 0 40px;
}

结果:

1 回复
回到顶部