个人中心
gpt4 book ai didi

javascript - 样式形成 Angular Material 不适用于 IE 11

转载 作者：行者123 更新时间：2023-11-28 15:53:31 24 4
gpt4 key购买 nike

我使用 Angular Material 在 Angular.js 中创建了一个网站

这是我的页面在 Chrome、FF、MS Edge 上的样子(正确的样子) enter image description here

这是它在 IE 11 上的样子 enter image description here

这是 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 上的外观？

最佳答案

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

关于javascript - 样式形成 Angular Material 不适用于 IE 11，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41486338/

24 4 0
文章推荐： css - Nightwatch.js 和 nth-child (css) 的问题
文章推荐： ios - 带有 iOS 应用程序图像查看器的 ImageSlider
文章推荐： javascript - 滚动时更改导航栏固定顶部颜色
文章推荐： html - 相对宽度为 100% 的绝对定位
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com