我使用flexbox来显示一个blockquote和author / avatar相互水平。这是幻灯片(flexslider),但似乎不是问题的原因。
在我们点击 IE10 之前一切正常。它似乎在Chrome,Firefox,Opera,Safari,Edge和IE11中运行良好。
我遇到的问题是文字在引用结尾处被截断。如果您最初没有看到此信息,则可能需要调整视口大小。这可能是由于文本每侧的填充,以便为自定义打开/关闭引号留出空间。
IE10中的另一个问题是,当文本很长时(参见" James Hetfield Longname"在第一个引用中)它没有包装。这可能与我的另一个问题有关,因为我猜文本没有正确包装然后。
这里有一些示例链接。我已经包含了CodePen以及HTML模板的剥离版本。
CodePen:http://codepen.io/moy/pen/XdLELV 模板:http://moymadethis.com/flex/quote.html
真的希望有人可以帮忙解决这个问题!
这里是代码,因为它会让我添加一些东西(虽然我不认为CSS / HTML上的这个墙本身对我自己有帮助)!
编辑:我应该补充一点,我使用Autoprefixer来支持额外的flex前缀。
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>
<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</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
<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</strong> Damage Inc.</p>
</footer>
</blockquote>
</li>
</ul>
</div>
CSS:
/* Base blockquote styles */
blockquote {
margin-bottom: $baseline*2;
overflow: hidden; // Fixes bug when inside flexslider when open/close quote-marks duplicate.
padding: $baseline $baseline 0 0;
p {
margin-bottom: $baseline/2;
}
> p {
color: $blue-light;
@include font-size(25);
line-height: $baselineheight/1.25;
font-weight: 300;
padding-left: 30px;
-webkit-font-smoothing: antialiased;
&:before,
&:after {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;
}
&:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
margin: 5px 0 0 5px;
position: absolute;
top: auto;
}
}
footer {
padding-left: 30px;
}
.name {
color: $blue;
display: block;
text-transform: uppercase;
}
}
/* Feature (avatar) quotes */
.feature-quote {
margin-bottom: $baseline;
padding-top: 5px;
}
.feature-quote footer p {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.feature-quote__cite {
margin-top: $baseline;
}
.feature-quote__avatar {
border: 5px solid $blue-lighter;
border-radius: 100%;
display: inline-block;
height: 60px;
margin-right: $baseline/2;
width: 60px;
}
/* Above 768px (Feature quote side-by-side */
@media only screen and (min-width: 768px) {
blockquote {
margin: 0 25px $baseline*2;
}
.feature-quote {
display: flex;
}
.feature-quote__text {
order: 2;
width: 66.66666%;
}
.feature-quote__cite {
display: flex;
align-items: center;
justify-content: center;
order: 1;
margin-top: 0;
padding-right: 30px;
width: 33.33333%;
}
.feature-quote__avatar {
height: 80px;
width: 80px;
}
.no-flexbox {
.feature-quote {
margin: 0 auto $baseline;
max-width: 800px;
}
.feature-quote__text,
.feature-quote__cite {
text-align: center;
width: 100%;
}
.feature-quote__cite {
p {
text-align: left;
}
}
}
}
答案 0 :(得分:1)
扩展Pete关于IE10未正确支持flexbox的评论。
http://caniuse.com/#search=flex
关于IE10:
仅支持2012语法
需要-ms-前缀
这个答案实际上在IE10中有很多关于flex的信息:https://stackoverflow.com/a/21306343/2117156
答案 1 :(得分:0)
注意我正在使用自动修复程序,因此会自动生成所有-ms-前缀。我将在这里注意无前缀声明。
在段落上添加以下行就可以实现技巧flex: 0 1 auto;
我还遇到了一个问题,即文本不会包装在.feature-quote__cite
容器中。我尝试添加上面没有用的。要解决此问题,我必须将flex: 0 1 auto;
直接添加到段落内而不是父容器.feature-quote__cite
上。不理想,但看起来它已经成功了。
另外,在IE11中,当没有足够的水平空间时,头像图像会被压扁。我发现在图片中添加flex-shrink: 0;
修复此问题。