Different Look in Chrome and Internet Explorer

** Note: this will be a longer post because of various issues, so I’ll divide it via subheadings for clarity **

Using
WP: 4.1.1
Customizr (w/ child theme): 3.3.13

URL in question: https://www.johnrothra.com

Here’s the browser versions I’ve tested on:
Chrome: 41.0.2272.101 m
IE: 11.0.9600.17691

I didn’t test on Firefox or Safari because in the past I’ve noticed that Chrome, Firefox, and Safari all display pretty much identically, with IE being the rogue.

URL: https://www.johnrothra.com
Child Functions.php: https://pastebin.com/gAKyFkvc
Child custom CSS: https://pastebin.com/8DWubFeT

There are three key differences I want to point out. I’ll also provide screen shots to show the differences (all on the same exact computer). BTW, I did clear the caches of both browsers before doing the screen shots. Also, I cleared the site’s cache just in case.

Issue 1: Placement of Social Icons in Menu Bar

IE: https://drive.google.com/file/d/0B4mnNZ1F-EDsM2hDcU83Uk5xcFU/view?usp=sharing
Chrome: https://drive.google.com/file/d/0B4mnNZ1F-EDsWl9GYlZVV1AzdG8/view?usp=sharing

First issue with the social icons is their placement. Notice that in Chrome they are at the far right (where they should be; in IE they are not that far right. If you see in the functions.php file linked above, I have code that I got from Themes & Co. to remove the tagline, move the social icons to the far right, and move the menu to the left. IE does not seem to be working properly, apparently leaving the tag line section intact, but empty. That section should be gone, not just empty.

Second issue with the social icons is their color. In IE they are gray until you hover over them. In Chrome they are colored. The color upon hovering seems to be the same, though it may not be. If you look in the CSS, I have it set to make the icons colored even without hovering, not gray, yet IE seems to ignore that.

Third, and more minor, issue with the social icons is their size. In Chrome they are slightly bigger. Again, I have this set in the CSS, yet it’s different.

Issue 2: Color of Sidebar Widget Headers

IE: https://drive.google.com/file/d/0B4mnNZ1F-EDsSnJGOURRSW56ZnM/view?usp=sharing
Chrome: https://drive.google.com/file/d/0B4mnNZ1F-EDsRVd6WjRQbTQwSXM/view?usp=sharing
** These screen shots display both issues 2 and 3. **

In IE they are darker (almost blueish purple), but they are a lighter (and desired) lighter blue. In the CSS I have it set to the lighter blue. I did have them set to the darker blue/purple, but changed that weeks ago. I had never viewed the site in IE when I had them at the blue/purple color, so that should not be in the browser’s cache. Yet, there it is. I did clear both broswers’ caches, and the cache on the site (W3 Total Cache), yet IE still shows the blue/purple coloring despite the CSS.

Issue 3: Colored Bars Below Grid Post Listings

Not only does IE show them, it shows them in the dark blue/purple coloring. Again, I removed these weeks ago, yet there they are in IE. Chrome shows it correctly: no bars. Also, like other things, in the CSS I removed them, yet IE is ignoring this it seems.

I have no idea why these issues are there, but it distorts the look I want in IE, giving me something that shouldn’t be.