Remove deprecated br clear

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
The clear attribute is deprecated
Use inline-block instead of float
The zoom issue doesn't when using the gradient option

Author: nikolai-b

inst/htmlwidgets/leaflet.js

@@ -1815,7 +1815,7 @@ methods.addLegend = function (options) {
         var leftDiv = (0, _jquery2.default)("<div/>").css("float", "left"),
             rightDiv = (0, _jquery2.default)("<div/>").css("float", "left");
         leftDiv.append(gradSpan);
-        (0, _jquery2.default)(div).append(leftDiv).append(rightDiv).append((0, _jquery2.default)("<br clear=\"both\"/>"));
+        (0, _jquery2.default)(div).append(leftDiv).append(rightDiv).append((0, _jquery2.default)("<br>"));
 
         // Have to attach the div to the body at this early point, so that the
         // svg text getComputedTextLength() actually works, below.
@@ -1863,7 +1863,7 @@ methods.addLegend = function (options) {
         labels.push(options.na_label);
       }
       for (var i = 0; i < colors.length; i++) {
-        legendHTML += "<i style=\"background:" + colors[i] + ";opacity:" + options.opacity + "\"></i> " + labels[i] + "<br clear='both'/>";
+        legendHTML += "<i style=\"background:" + colors[i] + ";opacity:" + options.opacity + "\"></i> " + labels[i];
       }
       div.innerHTML = legendHTML;
     }

inst/htmlwidgets/lib/leafletfix/leafletfix.css

@@ -6,27 +6,31 @@ img.leaflet-tile {
   border: none;
 }
 .info {
-    padding: 6px 8px;
-    font: 14px/16px Arial, Helvetica, sans-serif;
-    background: white;
-    background: rgba(255,255,255,0.8);
-    box-shadow: 0 0 15px rgba(0,0,0,0.2);
-    border-radius: 5px;
+  padding: 6px 8px;
+  font: 14px/16px Arial, Helvetica, sans-serif;
+  background: white;
+  background: rgba(255,255,255,0.8);
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  border-radius: 5px;
 }
 .legend {
-    line-height: 18px;
-    color: #555;
+  line-height: 18px;
+  color: #555;
 }
 .legend svg text {
-    fill: #555;
+  fill: #555;
 }
 .legend svg line {
-    stroke: #555;
+  stroke: #555;
 }
 .legend i {
-    width: 18px;
-    height: 18px;
-    float: left;
-    margin-right: 8px;
-    opacity: 0.7;
+  width: 18px;
+  height: 18px;
+  margin-right: 4px;
+  opacity: 0.7;
+  display: inline-block;
+  vertical-align: top;
+  /*For IE 7*/
+  zoom: 1;
+  *display: inline;
 }

javascript/src/methods.js

@@ -727,7 +727,7 @@ methods.addLegend = function(options) {
         rightDiv = $("<div/>").css("float", "left");
       leftDiv.append(gradSpan);
       $(div).append(leftDiv).append(rightDiv)
-        .append($("<br clear=\"both\"/>"));
+        .append($("<br>"));
 
       // Have to attach the div to the body at this early point, so that the
       // svg text getComputedTextLength() actually works, below.
@@ -788,7 +788,7 @@ methods.addLegend = function(options) {
       }
       for (let i = 0; i < colors.length; i++) {
         legendHTML += "<i style=\"background:" + colors[i] + ";opacity:" +
-                      options.opacity + "\"></i> " + labels[i] + "<br clear='both'/>";
+                      options.opacity + "\"></i> " + labels[i];
       }
       div.innerHTML = legendHTML;
     }