0

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?

4

2 回答 2

3

Maybe try using rem units vs em. Something like:

blockquote:before, q:before {
  font-size: 6rem;
  line-height: 0.9em;
}

That way your sizes will be relative to the base font size and not parent size (which IE might be calculating differently than other browsers do).

It will render the same in Chrome and IE, but you'll probably have to tweak the sizes a bit.

于 2015-07-10T08:41:15.143 回答
0

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..

于 2015-07-10T08:56:29.217 回答