This is what IE10 looks like.

And on IE8

As can be seen from the figure, the font has changed and its size does not fit into the menu because of this, the question is how to reduce this size? as well as lost text in placeholdere?

  1. As an option, I tried to connect separate styles for IE9 and below, but they did not connect o_O

    <link href="../css/colorpicker.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 9]><link rel="stylesheet" href="../css/style_ie.css" type="text/css" /<![endif]-->

  2. with placeholder tried to do so

     <script type="text/javascript"> $(document).ready(function() { /* Placeholder for IE */ if($.browser.msie) { // Условие для вызова только в IE $("form").find("input[type='text']").each(function() { var tp = $(this).attr("placeholder"); $(this).attr('value',tp).css('color','#ccc'); }).focusin(function() { var val = $(this).attr('placeholder'); if($(this).val() == val) { $(this).attr('value','').css('color','#303030'); } }).focusout(function() { var val = $(this).attr('placeholder'); if($(this).val() == "") { $(this).attr('value', val).css('color','#ccc'); } }); /* Protected send form */ $("form").submit(function() { $(this).find("input[type='text']").each(function() { var val = $(this).attr('placeholder'); if($(this).val() == val) { $(this).attr('value',''); } }) }); } }); </script>

    but did not work: (

2 answers 2

The styles did not connect, because you had an error in the markup.
In the conditional comment you did not close the link tag.
Correct the code:

 <!--[if lte IE 9]><link rel="stylesheet" href="../css/style_ie.css" type="text/css" /><![endif]-->
  • damn vnature) but the question was that on ie8 the font is not displayed correctly @ font-face {font-family: 'OswaldRegular'; src: url ('- g5pdusrgvxvol5u-a_whw.eot'); src: url ('- g5pdusrgvxvol5u-a_whw.eot') format ('embedded-opentype'), url ('- g5pdusrgvxvol5u-a_whw.woff') format ('woff'), url ('- g5pdusrgvxv555155 ", format (' woff ') ) format ('truetype'), url ('- g5pdusrgvxvol5u-a_whw.svg # OswaldRegular') format ('svg'); } - reddyk
  • @reddyk, collect an example on jsFiddle, it will be easier to answer - VenZell

Regarding placeholder. Your code works only for elements of type input , because it uses the appropriate selector and .attr('value') instead of .val() . In addition, $.browser is an obsolete property. Corrected code:

 if(!('placeholder' in document.createElement('input'))){ $(document).ready(function() { $("form").find("input[type='text'], textarea").each(function() { var tp = $(this).attr("placeholder"); $(this).val(tp).css('color','#ccc'); }).focusin(function() { var val = $(this).attr('placeholder'); if($(this).val() == val) { $(this).val('').css('color','#303030'); } }).focusout(function() { var val = $(this).attr('placeholder'); if($(this).val() == "") { $(this).val(val).css('color','#ccc'); } }); $("form").submit(function() { $(this).find("input[type='text'], textarea").each(function() { var val = $(this).attr('placeholder'); if($(this).val() == val) { $(this).val(''); } }) }); }); }
  • Yes, I made the same decision) - reddyk