Search code examples
cssgoogle-chromeinternet-explorerblockquote

Quotation symbol added with css is displayed differently in Chrome and IE10

I have the following css code:

blockquote {
    color:#bc6d10;
    font-family: 'FranklinGothicURW-Dem';
    font-style:normal;
    float:left;
    margin:0;
    font-size:1.5em;
    margin:20px 0 5px;}

blockquote p {
    font-size:1.4em;
    line-height:1em;
    float:left;
    width:88%;}

blockquote:before, q:before {
    content:"❞";
    font-size:6em;
    line-height:0.9em;
    float:left;
    width:12%;
}

It produces this ie Chrome:

enter image description here

And this in IE10:

enter image description here

I'm not that fluent in CSS, so I am having some trouble figuring out why. Does anyone know why?

Solution

  • As far as i got the point, you have to use some tweaks in css..

    please test this code as m not able to test..

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.entry-content blockquote {font-size:20px;}
     blockquote::before, q::before 
     {
         margin-top:-53;
         margin-left:-20;
         font-size:6.6rem;
     }
}

    and let me know if it is working or not..

    Yes Slavenko's answer is better then me so you can combine both..just change the size but then don't forget to change the margin top as it must..line height is not working there..

    sorry if it wont work as its not tested as i discussed with you before..

    Updated I just changed the size and margin so please re test..