在IE EDGE中,当pointer-events: none;应用于span标记时,它似乎不起作用,当添加javascript click事件时,e.target是span而不是父级.
HTML
<div class="parent>
<div class="child"><span class="the-span">Something in a span blah blah</span></div>
</div>
CSS
.child span {
pointer-events: none;
}
JS
$(document).click(function(e) {
console.info(e.target);
});
完整的Codepen示例:https://codepen.io/JoeHastings/pen/gWgzgK
使用IE 11和EDGE支持的旧CSS网格规范时。网格项目是否可以像当前规范一样自动放置？
即不必在网格项目上定义列：
.item:nth-child(1) {
-ms-grid-column: 1;
}
.item:nth-child(2) {
-ms-grid-column: 2;
}
.item:nth-child(n) {
-ms-grid-column: n;
}
使用弹性容器和flex-wrap: wrap设置,您可以使用溢出的项目与中心对齐justify-content: center.
有没有办法使用CSS网格实现相同的行为溢出网格项？
我创建了一支显示所需弹性行为的笔
.container-flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container-flex .item {
width: 33.33%;
background: green;
border: 1px solid;
}
.container-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container-grid .item {
background: red;
border: 1px solid;
}
* {
box-sizing: border-box;
}<h3>Flex</h3>
<div class="container-flex">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<h3>Grid</h3>
<div class="container-grid">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div> …