IE11-specific style tweaks

src/editor/widgets/tag/TagWidget.jsx

@@ -11,17 +11,17 @@ const TagWidget = props => {
   const [ showDelete, setShowDelete ] = useState(false);
 
   // Every body with a 'tagging' purpose is considered a tag
-  const tagBodies = props.annotation ? 
+  const tagBodies = props.annotation ?
     props.annotation.bodies.filter(b => b.purpose === 'tagging') : [];
 
   const toggle = tag => _ => {
     if (showDelete === tag) // Removes delete button
       setShowDelete(false);
-    else 
+    else
       setShowDelete(tag); // Sets delete button on a different tag
   }
 
-  const onDelete = tag => evt => { 
+  const onDelete = tag => evt => {
     evt.stopPropagation();
     props.onRemoveBody(tag);
   }
@@ -32,28 +32,30 @@ const TagWidget = props => {
 
   return (
     <div className="r6o-widget tag">
-      { tagBodies.length > 0 &&
-        <ul className="r6o-taglist">
-          { tagBodies.map(tag => 
-            <li key={tag.value} onClick={toggle(tag.value)}>
-              <span className="label">{tag.value}</span>
+      <div>
+        { tagBodies.length > 0 &&
+          <ul className="r6o-taglist">
+            { tagBodies.map(tag =>
+              <li key={tag.value} onClick={toggle(tag.value)}>
+                <span className="label">{tag.value}</span>
 
-              {!props.readOnly &&
-                <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
-                  <span className="delete-wrapper" onClick={onDelete(tag)}>
-                    <span className="delete">
-                      <CloseIcon width={12} />
+                {!props.readOnly &&
+                  <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
+                    <span className="delete-wrapper" onClick={onDelete(tag)}>
+                      <span className="delete">
+                        <CloseIcon width={12} />
+                      </span>
                     </span>
-                  </span>
-                </CSSTransition>
-              }
-            </li>
-          )}
-        </ul>
-      }
+                  </CSSTransition>
+                }
+              </li>
+            )}
+          </ul>
+        }
+      </div>
 
       { !props.readOnly &&
-        <Autocomplete 
+        <Autocomplete
           placeholder={i18n.t('Add tag...')}
           onSubmit={onSubmit}
           vocabulary={props.vocabulary || []} />
@@ -63,4 +65,4 @@ const TagWidget = props => {
 
 };
 
-export default TagWidget;
+export default TagWidget;

themes/default/editor/widgets/tag/_tag.scss

@@ -2,6 +2,20 @@
   display:none;
 }
 
+/* IE11-specific hackery */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+
+  .r6o-widget.tag .r6o-taglist li {
+    height:27px;
+
+    .delete-wrapper .delete {
+      position:relative;
+      top:-4px;
+    }
+  }
+
+}
+
 .r6o-widget.tag {
   background-color:$blueish-white;
   border-bottom:1px solid $lightgrey-border;
@@ -51,12 +65,12 @@
 
         .delete {
           padding:2px 6px;
-          
+
           .icon {
             height:11px;
             padding-bottom:1px;
           }
-        
+
         }
 
         svg {