Utilizing flexbox to showcase a blockquote and author/avatar in a horizontal layout within a slideshow (flexslider) has been running smoothly, except for one hiccup with IE10. Oddly enough, it seems to be functioning perfectly on Chrome, Firefox, Opera, Safari, Edge, and IE11.
The issue arises when the text gets cut off at the end of the quote. To notice this, resize your viewport if not immediately visible. The problem could be attributed to the padding set on either side of the text to accommodate custom open/close quotation marks.
Another snag encountered in IE10 occurs with long texts (for instance, "James Hetfield Longname" in the first quote) as they fail to wrap properly. This might be linked to the previous issue since incorrect wrapping suggests text disruptions.
For reference, I've attached links to an example below. Included are both a CodePen snippet and a simplified version of my HTML template:
CodePen: http://codepen.io/moy/pen/XdLELV Template:
Your assistance in resolving these issues would be greatly appreciated!
Below is the code; although its extensive nature may seem overwhelming, it's imperative for uncovering solutions:
EDIT: Autoprefixer was utilized to incorporate additional flex prefixes.
HTML:
<div class="flexslider">
<ul class="slides">
<li>
<blockquote class="feature-quote">
<p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<footer class="feature-quote__cite">
<img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
<p><strong class="name">James Hetfield Hetfield</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
{/* Additional list items */}
</ul>
</div>
CSS:
/* Base blockquote styles */
blockquote {
/* Attributes */
}
/* Feature (avatar) quotes */
.feature-quote {
/* Styles */
}
@media only screen and (min-width: 768px) {
/* Media query styles */
}