问题

Question

问题

因此，在工作中，我们使用jhipster来生成我们的项目。表格内有一组动作按钮（mat-icon-button），可触发不同的动作。

其中一个按钮存在渲染问题，显示起来比解释起来容易得多，所以请看一下： https://imgur.com/bylw14p

此仅在IE中发生（我正在使用IE v11.0.9600.19129）。我在大型公司环境中工作，因此IE是标准浏览器，我无法更改它。

我在一个简单的应用程序中简化并复制了我们的设置，该应用程序不是使用jhipster而是使用angular-cli生成的。（下面的代码）

奇怪的是，此效果仅在表的第一列中发生，但是第一行中的按钮始终不起作用。在不同的按钮上单击也会触发其他按钮上发生的不良效果（不可预测）。

我的猜测是，引导程序（jhipster使用的引导程序）和有角度的材质按钮（我们放入的按钮）相互冲突。但是我真的不知道。

（不太好）解决方法

在我们的应用程序（不是我的简化程序）中，它可以设置position: relative。但是，材料设计的波纹效果不再仅仅出现在按钮上，而是整个桌子上的波纹。
将IE设置为软件渲染也有帮助。但这不是实践，因为我们无法以任何方式更改浏览器。因此，它必须与当前安装的IE版本兼容。

演示应用程序中的代码

style.scss

/*@import 'bootstrap-variables'; */
@import '~bootstrap-material-design/scss/bootstrap-material-design'; <----- When I comment out this line, you'll get the third image.
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '~@angular/material/theming';

@import '~material-design-icons-iconfont/dist/material-design-icons.css';
.mat-icon-button {
    color: red;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

package.json

{
  "name": "button-graphics-bug-in-ie",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "angular-material-icons": "^0.7.1",
    "bootstrap": "^4.1.3",
    "bootstrap-material-design": "^4.1.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "material-design-icons-iconfont": "^3.0.3",
    "rxjs": "~6.2.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

my-button.component.html

<button mat-icon-button color=primary>
    <mat-icon aria-label="This is an aria-label">favorite</mat-icon>
</button>

my-material.ts

我通过此类加载MatIconButton，该类已导入app.module：

import {MatButtonModule, MatIconModule} from '@angular/material';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [MatButtonModule, MatIconModule],
    exports: [MatButtonModule, MatIconModule],
})
export class MyMaterialModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyMaterialModule } from './my-material';
import { MyButtonComponent } from './my-button.component';
import { MyTableComponent } from './my-table.component';
import { MatIconModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    MyButtonComponent,
    MyTableComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

具有Bootstrap材质设计的Mat-Icon-Button上的呈现错误

问题

（不太好）解决方法

演示应用程序中的代码

0 个答案: