伪元素未在左上角对齐
[英] pseudo element not aligning at top left corner
本文介绍了伪元素未在左上角对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 CSS counter 和 content 显示图块编号.我想在磁贴的左上角显示这些数字.以下代码在 Chrome 中正确显示，但在 FF 或 IE 11 中不正确(未在其他浏览器上检查).
我需要在 CSS 中进行哪些更改才能始终在左上角显示数字?
Chrome:这就是我想要的:
Firefox:数字左对齐......但不是顶部:
.tiles {/* flex 属性作为容器 (tiles level 1, 2 & 3) */显示:弹性；flex-wrap: 包裹;对齐内容:居中；对齐项目:拉伸；对齐内容:拉伸；/* flex 属性作为内容 (tiles level 2 & 3) */弹性增长:1；弹性收缩:1；弹性基础:拉伸；}.tiles.level1 {弹性方向:列；弹性增长:0；宽度:600px；高度:300px；计数器重置:tileNum；}.tiles.level2 {弹性方向:行；}.tiles.level3 {弹性方向:行；}.tiles .title {对齐自我:居中；字体大小:42px；}.瓦 {边框:1px纯黑色；背景颜色:白色；宽度:1px；弹性增长:1；弹性收缩:1；弹性基础:自动；/* 自动 = 使用宽度 &高度值(如果可用)*/字体大小:24px；}.centerContainer {显示:弹性；对齐内容:间隔；对齐项目:居中；对齐内容:居中；弹性方向:行；flex-wrap: 包裹;}.centerContent {/* 弹性增长:1;弹性收缩:1；对齐自我:居中；*/}.tile:before {反增量:tileNum；内容:计数器(tileNum)；align-self: flex-start;弹性增长:0；字体大小:16px；}.tile:在{之后内容: ' ';align-self: flex-end;弹性增长:0；字体大小:16px；}.品牌 {文字装饰:下划线；字体变体:小型大写字母；}
<div class="tiles level1"><span class="title"><span class="brand">所以</span>东西</span><div class="tiles level2"><div class="tiles level3"><span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
<div class="tiles level3"><span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
<div class="tiles level2"><div class="tiles level3"><span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
<div class="tiles level3"><span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
</section>
注意:
- 我正在使用弹性盒来显示磁贴，并且更喜欢仅使用弹性盒的解决方案
- 我正在寻找仅使用 CSS 的解决方案.(我很确定这是可能的，但我错过了一些与 flexbox 属性相关的东西.)
.tiles 的嵌套是必要的，因为:当在 PC 或移动设备上以横向模式查看页面时，我想连续显示 4 个图块，但如果查看则只想显示连续的 2 个图块在纵向模式的移动设备上.我可以为此提供一些替代方案.
解决方案
问题根源在align-content这里:
.centerContainer {显示:弹性；对齐内容:间隔；对齐项目:居中；对齐内容:居中；<-- 导致问题弹性方向:行；flex-wrap: 包裹;}
当你告诉 flex 容器中的行居中时，这会折叠所有额外的空间，将所有行打包在容器的中心.这就是 align-content: center 所做的.
所以你的计数器伪元素，浏览器认为是弹性项目，不应该 移动到容器顶部.您指定的 align-self: flex-start 应该无法实现您的目标，因为该项目仅限于居中的弹性线及其同级项.
因此，就遵守规范而言，Firefox 拥有此权利.
Chrome，正如它经常做的那样(参见此处和此处 示例)，似乎在考虑逻辑用户行为以改善用户体验(他们称之为 干预).
无论如何，一旦你删除了 align-content: center，stretch 默认值再次接管，你的 flex 项目可以沿着容器的整个高度自由移动.
.tiles {/* flex 属性作为容器 (tiles level 1, 2 & 3) */显示:弹性；flex-wrap: 包裹;对齐内容:居中；对齐项目:拉伸；对齐内容:拉伸；/* flex 属性作为内容 (tiles level 2 & 3) */弹性增长:1；弹性收缩:1；弹性基础:拉伸；}.tiles.level1 {弹性方向:列；弹性增长:0；宽度:600px；高度:300px；计数器重置:tileNum；}.tiles.level2 {弹性方向:行；}.tiles.level3 {弹性方向:行；}.tiles .title {对齐自我:居中；字体大小:42px；}.瓦 {边框:1px纯黑色；背景颜色:白色；宽度:1px；弹性增长:1；弹性收缩:1；弹性基础:自动；/* 自动 = 使用宽度 &高度值(如果可用)*/字体大小:24px；}.centerContainer {显示:弹性；对齐内容:间隔；对齐项目:居中；/* 对齐内容:居中；<-- 删除 */弹性方向:行；flex-wrap: 包裹;}.centerContent {/* 弹性增长:1;弹性收缩:1；对齐自我:居中；*/}.tile:before {反增量:tileNum；内容:计数器(tileNum)；align-self: flex-start;弹性增长:0；字体大小:16px；}.tile:在{之后内容: ' ';align-self: flex-end;弹性增长:0；字体大小:16px；}.品牌 {文字装饰:下划线；字体变体:小型大写字母；}
<div class="tiles level1"><span class="title"><span class="brand">所以</span>东西</span><div class="tiles level2"><div class="tiles level3"><span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
<div class="tiles level3"><span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
<div class="tiles level2"><div class="tiles level3"><span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
<div class="tiles level3"><span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span><span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">所以</span>东西</span></span>
</section>
jsFiddle 演示
更完整的解释，请看这篇文章:
I'm displaying tile numbers using CSS counter and content. I want to display these number at left top corner of the tile. The following code shows it correctly in Chrome but not in FF or IE 11 (haven't checked on other browsers).
What changes do I need in CSS to consistently show the number at left top corner?
Chrome: this is how I want:
Firefox: numbers aligned to left ... but not top:
.tiles {
/* flex properties as container (tiles level 1, 2 & 3) */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: strech;
align-content: strech;
/* flex properties as content (tiles level 2 & 3) */
flex-grow: 1;
flex-shrink: 1;
flex-basis: strech;
}
.tiles.level1 {
flex-direction: column;
flex-grow: 0;
width: 600px;
height: 300px;
counter-reset: tileNum;
}
.tiles.level2 {
flex-direction: row;
}
.tiles.level3 {
flex-direction: row;
}
.tiles .title {
align-self: center;
font-size: 42px;
}
.tile {
border: 1px solid black;
background-color: white;
width: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
/* auto = use width & height values if available */
font-size: 24px;
}
.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.centerContent {
/* flex-grow: 1;
flex-shrink: 1;
align-self: center;*/
}
.tile:before {
counter-increment: tileNum;
content: counter(tileNum);
align-self: flex-start;
flex-grow: 0;
font-size: 16px;
}
.tile:after {
content: ' ';
align-self: flex-end;
flex-grow: 0;
font-size: 16px;
}
.brand {
text-decoration: underline;
font-variant: small-caps;
}
<section class="section static">
<div class="tiles level1">
<span class="title">
<span class="brand">So</span>mething
</span>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
</div>
</section>
Note:
- I'm using flex box to display tiles and will prefer solution with flexbox only
- I'm looking for CSS only solution. (I'm pretty sure that it will be possible but I'm missing out on something related to flexbox properties.)
- Nesting of
.tiles is needed because: I want to show 4 tiles in a row when page is viewed on PC or mobile in landscape mode but want to show only 2 tiles in a row if viewed on mobile in portrait mode. I'm OK to have some alternative for this.
解决方案
The source of the problem is align-content here:
.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center; <-- causing the problem
flex-direction: row;
flex-wrap: wrap;
}
When you tell the lines in a flex container to be centered, this collapses all extra space, packing all lines in the center of the container. That's what align-content: center does.
So your counter pseudo-element, which the browsers consider a flex item, should not move to the top of the container. The align-self: flex-start you have specified should fail to achieve your goal because the item is confined to the centered flex line, along with its siblings.
So Firefox has this right, in terms of adherence to the spec.
Chrome, as it often does (see here and here for examples), appears to be factoring in logical user behavior to improve the user experience (they call this an intervention).
Anyway, once you remove align-content: center, the stretch default value takes over again, and your flex items can move freely along the entire height of the container.
.tiles {
/* flex properties as container (tiles level 1, 2 & 3) */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: strech;
align-content: strech;
/* flex properties as content (tiles level 2 & 3) */
flex-grow: 1;
flex-shrink: 1;
flex-basis: strech;
}
.tiles.level1 {
flex-direction: column;
flex-grow: 0;
width: 600px;
height: 300px;
counter-reset: tileNum;
}
.tiles.level2 {
flex-direction: row;
}
.tiles.level3 {
flex-direction: row;
}
.tiles .title {
align-self: center;
font-size: 42px;
}
.tile {
border: 1px solid black;
background-color: white;
width: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
/* auto = use width & height values if available */
font-size: 24px;
}
.centerContainer {
display: flex;
justify-content: space-between;
align-items: center;
/* align-content: center; <-- REMOVE */
flex-direction: row;
flex-wrap: wrap;
}
.centerContent {
/* flex-grow: 1;
flex-shrink: 1;
align-self: center;*/
}
.tile:before {
counter-increment: tileNum;
content: counter(tileNum);
align-self: flex-start;
flex-grow: 0;
font-size: 16px;
}
.tile:after {
content: ' ';
align-self: flex-end;
flex-grow: 0;
font-size: 16px;
}
.brand {
text-decoration: underline;
font-variant: small-caps;
}
<section class="section static">
<div class="tiles level1">
<span class="title">
<span class="brand">So</span>mething
</span>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
<div class="tiles level2">
<div class="tiles level3">
<span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
<div class="tiles level3">
<span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
<span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span>
</span>
</div>
</div>
</div>
</section>
jsFiddle demo
For a more complete explanation, see this post:
这篇关于伪元素未在左上角对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
