HTML5 Запирающий элемент в Internet Explorer

Question

В Internet Explorer 9-11 мои подставки html5 падают ниже входных контейнеров. Я прочитал несколько сообщений о проблемах с html5-заполнителями в IE, но единственным решением, которое я видел, является использование плагина jquery. Я добавил этот плагин, но он, к сожалению, не имел никакого эффекта: https://github.com/mathiasbynens/jquery-placeholder.

Я пробовал больше решений для CSS, чем я могу считать добавлением дополнений, удалением прокладки, установкой минимальной высоты, удалением минимальной высоты, увеличением высоты строки и т. Д. Вот что выглядит теперь с увеличением заполнения: http://i.imgur.com/N0eFh7t.png. Для этого есть много места, но он все еще отключается.

В Chrome и FF это выглядит так: http://i.imgur.com/0YRkcGu.png (вот как это должно выглядеть).

Здесь вы можете просмотреть песочницу сайта и посмотреть мой CSS. Форма находится в боковой панели (хотя все формы на сайте страдают от тех же проблем http://hracuity.staging.wpengine.com/blog/

Я признательна за любую помощь

Answer 1

Оказывается, это была проблема с высотой линии. У меня была высота линии, установленная на 1.75, что заставило отрезать часть текста закладок. Установка высоты линии на 1 фиксировала ее.

Answer 2

Это может помочь:.!

// FUNCTION TO SET PLACEHOLDER IN I.E. 

(function($) { 
    function toggleLabel() { 
     var input = $(this); 

     if (!input.parent().hasClass('placeholder')) { 
      var label = $('<label>').addClass('placeholder'); 
      input.wrap(label); 

      var span = $('<span>'); 
      span.text(input.attr('placeholder')) 
      input.removeAttr('placeholder'); 
      span.insertBefore(input); 
     } 

     setTimeout(function() { 
      var def = input.attr('title'); 
      if (!input.val() || (input.val() == def)) { 
       input.prev('span').css('visibility', ''); 
       if (def) { 
        var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body'); 
        input.prev('span').css('margin-left', dummy.width() + 3 + 'px'); 
        dummy.remove(); 
       } 
      } else { 
       input.prev('span').css('visibility', 'hidden'); 
      } 
     }, 0); 
    }; 

    function resetField() { 
     var def = $(this).attr('title'); 
     if (!$(this).val() || ($(this).val() == def)) { 
      $(this).val(def); 
      $(this).prev('span').css('visibility', ''); 
     } 
    }; 

    var fields = $('input, textarea'); 

    fields.live('keydown', toggleLabel); 
    fields.live('paste', toggleLabel); 
    fields.live('focusin', function() { 
     $(this).prev('span').css('color', '#000000'); 
    }); 
    fields.live('focusout', function() { 
     $(this).prev('span').css('color', '#000000'); 
    }); 

    $(function() { 
     $('input[placeholder], textarea[placeholder]').each(
      function() { toggleLabel.call(this); } 
     ); 
    }); 

})(jQuery); 

Answer 3

У меня была такая же проблема с линейно- высота, вызывающая вырезание снизу внизу.

Решения, которое работало для меня было сбросить line-height вернуться к нормальному (чтобы избежать разрезания текста) и установить display в inline-block (в положение заполнитель со ссылкой на вход line-height)

input:-ms-input-placeholder { 
    line-height: normal; 
    display: inline-block; 
} 

Answer 4

Это исправить :

input.mycustomclass:-ms-input-placeholder { 
    line-height: 1; 
}