为什么box-shadow与position:relative不能正常工作?

时间:2019-08-05 11:57:51

标签: html css angular frontend

我试图在表格的每一行下绘制阴影。在chrome中,mozilla一切正常,但在Internet Explorer 11中却无法正常工作。

我注意到在Internet Explorer中,该行的颜色是thead的颜色,并且有一个较大的容器遮盖了我的阴影。 Internet Explorer Chrome, mozilla 我尝试使用伪元素::after,但是当我使用伪元素absolute时,我无法单击行,选择文本等。

如果将位置更改为.table { width: 100%; border-collapse: separate; border-spacing: 0 3px; padding: 0 2px; &-row { position: relative; transition: all 0.2s ease; border: 1px solid $c-white; border-radius: 3px; background-color: $c-white; box-shadow: 0 1px 7px 10px rgba(0, 0, 0, 0.12); } } ,我也注意到行的宽度较小,但框阴影效果很好。

<ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef class="table-header-cell">
      <mat-checkbox
        [hidden]="hideSelectAllCheckbox"
        color="primary"
        (change)="$event ? toggleSelectAll() : null; onSelectionChange()"
        [checked]="selection.hasValue() && isAllSelected()"
        [indeterminate]="selection.hasValue() && !isAllSelected()"
      >
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row" class="table-cell button">
      <mat-checkbox
        color="primary"
        [disabled]="dataSource[getRowIndex(row)].options.disabled"
        (click)="$event.stopPropagation()"
        (change)="$event ? selection.toggle(row) : null; onSelectionChange()"
        [checked]="selection.isSelected(row)"
      >
      </mat-checkbox>
    </td>
  </ng-container>
::after

有什么解决方法可以使 "editor.formatOnSave": true, // // Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed. "files.associations": { "*.ejs": "html, ejs, javascript" }, "editor.tabCompletion": "on", "[javascript]": {}, "[ejs]": {} } 可点击或使行下的div透明吗?

0 个答案:

没有答案