Question

我使用Angular Material

在Angular.js中创建了一个网站

这就是我的页面在Chrome，FF，MS Edge上的样子（正确的样子）

这就是它在IE 11上的样子

这是html（没有样式，因为它们对于问题来说太大了）

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
</head>

<body layout="column" layout-fill="" data-gr-c-s-loaded="true" class="layout-fill layout-column">
    <!--[if lt IE 10]>
 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
    <!-- uiView: -->
    <md-content flex="" ui-view="" layout-fill="" class="layout-fill ng-scope flex">
        <div layout="" class="application ng-scope layout-align-center-stretch layout-row" layout-align="center none">
            <form name="application" layout="column" flex-xs="90" flex-gt-xs="60" flex-gt-md="40" class="ng-pristine layout-column flex-xs-90 flex-gt-xs-60 flex-gt-md-40 ng-valid-email ng-invalid ng-invalid-required">
                <md-content layout="column" class="layout-column">
                    <h3>Whatever</h3>
                    <md-radio-group flex="50" ng-model="vm.testGoal" ng-change="vm.setDefaultTestGoal()" class="ng-pristine ng-untouched ng-valid flex-50 ng-empty" role="radiogroup" tabindex="0" aria-invalid="false">
                        <md-radio-button value="1" id="radio_2" role="radio" aria-checked="false" aria-label="Testy wstępne (50% konsumenci JMP, 25% konsumeci marek własnych innych sieci, 25% konsumeci produktów brandowych)">
                            <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                <div class="md-off"></div>
                                <div class="md-on"></div>
                            </div>
                            <div ng-transclude="" class="md-label">
                                <p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </md-radio-button>
                        <md-radio-button value="2" id="radio_3" role="radio" aria-checked="false" aria-label="Reformulacja (100% konsumenci JMP)">
                            <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                <div class="md-off"></div>
                                <div class="md-on"></div>
                            </div>
                            <div ng-transclude="" class="md-label">
                                <p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </md-radio-button>
                        <md-radio-button value="3" id="radio_4" role="radio" aria-checked="false" aria-label="Testy benchmarkingowe (1/3 konsumenci JMP, 1/3 konsumeci marek własnych innych sieci, 1/3 konsumeci produktów brandowych)">
                            <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                <div class="md-off"></div>
                                <div class="md-on"></div>
                            </div>
                            <div ng-transclude="" class="md-label">
                                <p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </md-radio-button>
                        <div layout="row" layout-align="start center" class="layout-align-start-center layout-row">
                            <md-radio-button value="4" id="radio_5" role="radio" aria-checked="false" aria-label="Inne:">
                                <div class="md-container md-ink-ripple" md-ink-ripple="" md-ink-ripple-checkbox="">
                                    <div class="md-off"></div>
                                    <div class="md-on"></div>
                                </div>
                                <div ng-transclude="" class="md-label">
                                    <p class="ng-scope">Other:&nbsp;</p>
                                </div>
                            </md-radio-button>
                            <md-input-container style="width: 100%; height: auto;" class="">
                                <textarea ng-model="vm.otherTestGoal" ng-change="vm.changeTestGoal()" class="ng-pristine ng-untouched ng-valid md-input ng-empty" id="input_6" rows="1" aria-invalid="false" style="height: 30px;"></textarea>
                                <div class="md-errors-spacer"></div>
                            </md-input-container>
                        </div>
                    </md-radio-group>
                </md-content>
            </form>
        </div>
    </md-content>
</body>
<div></div>

</html>

这里有一个完整的jsfiddle与所有样式：

https://jsfiddle.net/4e32xdxx/

如何在IE上修复应用程序的外观？

Answer 1

只需从md-content中删除overflow-auto即可。 Jsfiddle：https://jsfiddle.net/4e32xdxx/1/

样式形成Angular材料不适用于IE 11

1 个答案: