EPUB 3 CSS stylesheet ignored in some cases?

Question

I created a MOBI file using Kindlegen. I fed the MOBI file to Calibre and converted it to an EPUB.

If I view the HTML files I used to create the MOBI file, they look great. All formatting is picked up from my separately defined .css file.

I took the EPUB file and ran it through the EPUB checker/validator. I corrected all errors (except one saying my html files need to be xhtml files, which is only a warning anyway).

I can view the resulting EPUB file in Abobe Digital Editions 4.5 and it looks great.

The problem I'm having is when I view it in Edge, it seems to be missing some of the formatting (headers aren't centered anymore, some specific text I have labeled as a quote and deliberately decided to not Justify the text becomes Justified like the main body text).

Since the EPUB passed the validator, I published it.

Does anyone have an idea why this is happening? Why would the HTML files work great and Abode can read the EPUB and interpret the CSS file perfectly, but Edge can't?

Im attaching a file with 3 different views so you can see how Edge loses the formatting. View Edge DE and BN

The quote HTML:
<div class=MsoIntenseQuote>
<p class=MsoIntenseQuoteCxSpFirst>
For we are his
workmanship, created in Christ Jesus for good works, which God prepared
beforehand, that we should walk in them.</p>
<p class=MsoIntenseQuoteCxSpLast>—Ephesians 2:10</p>
</div>

The quote CSS:
p.MsoIntenseQuote, li.MsoIntenseQuote, div.MsoIntenseQuote
{
    margin-top:1em;
    margin-right:4em;
    margin-bottom:1em;
    margin-left:4em;
    text-align:center;
    text-indent:0em;
    border:none;
    padding:0em;
    font-style:italic;
}
p.MsoIntenseQuoteCxSpFirst, li.MsoIntenseQuoteCxSpFirst, div.MsoIntenseQuoteCxSpFirst
{
    margin-top:1em;
    margin-right:0em;
    margin-bottom:0em;
    margin-left:0em;
    text-align:center;
    text-indent:0em;
    border-top:.1em solid;
    padding:.25em;
    font-style:italic;
}
p.MsoIntenseQuoteCxSpLast, li.MsoIntenseQuoteCxSpLast, div.MsoIntenseQuoteCxSpLast
{
    margin-top:0em;
    margin-right:0em;
    margin-bottom:1em;
    margin-left:0em;
    text-align:center;
    text-indent:0em;
    border-bottom:.1em solid;
    padding:0em;
    font-style:normal;
}

Answer 1

The first thing is: which reading system are you targeting? Edge is just a test environment, right? Or is this how people using Windows devices are reading ebooks these days? I always regard testing in browsers to be at best a preliminary approximation.

I regard Adobe DE and Readium on Chrome as my 2 most reliable testing platform on a Windows machine. Then I try Google Play Books, iBooks and then test mobis on various kindle platforms.

I suspect that Edge uses a different rendering engine than the other browsers and might have different default settings for formatting. That might explain discrepancies. But the principles of responsive design dictate that you're not going to have pixel precision. A quick look at your screenshot indicates that what renders in Edge looks pretty close to the other rendering.

You would need to give the CSS code and what features are different/missing for me to give any better information. It looks like your project is not commercial and maybe that's why you worry about Edge rendering because you think people might open it up in a browser. But I test a lot of ebooks, and I don't think I've ever tested tested on Edge.