Question

通过查看两个代码示例可以最好地显示我的问题：

第一个在不使用fieldset

时工作正常

第二个示例显示fieldset处于活动状态时，长文本将布局从窗口移出。（以全页视图显示）

但是，当您缩短文本时，它将起作用，并且将符合flex布局。

现在，我的问题是，当我在布局中省略fieldset时，我目前正在使用它，它对于chrome和firefox效果很好，但是在IE11中失败。当我插入fieldset时，布局在所有浏览器上看起来都不错，但是当在文本字段中输入长文本并且不幸的是，此文本字段用于发布链接时，就会发生上述问题。文本很容易变长。

我发现了一个帖子，显示了在忽略fieldset时页面的外观。

https://github.com/angular/material/issues/5084

这是两个片段：工作的人：

angular.module('MyApp', ['ngMaterial']);

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">

<!--   <fieldset> -->
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
                at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
                (injected humour and the like).
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
<!-- </fieldset> -->
</body>

和启用了fieldset的那个不工作的人：

angular.module('MyApp', ['ngMaterial']);

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">

<fieldset>
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
                at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
                (injected humour and the like).
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
</fieldset>
</body>

问题

是否可以？如果可以，如何使布局与fieldset一起使用？

Answer 1

将min-inline-size: auto添加到fieldset中以固定宽度。-fieldset具有由浏览器用户代理设置的计算样式min-inline-size: min-content。对于不支持此属性的用户代理，您将没有此问题。

请参见下面的演示

angular.module('MyApp', ['ngMaterial']);

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<body ng-app="MyApp">
<fieldset style="min-inline-size: auto">
   <div style="display: flex; margin: 1em">
    <div flex="100" layout="row">
      
      <!-- main information field -->
      <div flex='90'>
        <div layout='row' flex='100'>
          <div layout="column" flex="50" >
            <label>Externe notities</label>
            <md-content>
            <div>kjfsdlafsdja;gaagj;gsahgh;gas;hoisgr;hoisohig;asgk;hlgshlksgfhli;gfhlisgohi;sghoisgdiasghvvsdbjkgasdohisgfdhusgfhu;;uhksgdjsgk;dxbhj;sgd;hisghsguho;sguho;susgsgdbjkvdjhsdihlsfdjbkdshoi;gsdbjk;gebuk;svdukssgho8sgou;hsegbusfdsugoiusdgogu;sgd;oiisgr;uesgodlosdsdgldsglidsgluisdg
              </div>
            </md-content>
          </div>
          <div layout="column" flex="50">
            <label>Interne notities</label>
            <md-content>
              <div>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
                at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web
                page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
                (injected humour and the like).
              </div>
            </md-content>
          </div>
        </div>
      </div>

      <!-- stop light -->
      <div flex='10'>
        <img height="100" src="https://www.portacon.nl/magento/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/d/r/driekleurig_verkeerslicht_828x696_web.jpg" alt="stoplicht-wit" />
      </div>
    </div>
    </div>
</fieldset>
</body>

fieldset破坏了我在angularjs-material

1 个答案: