'hidden'属性不适用于flex-box

Question

'hidden'属性不适用于flex-box

我有使用flex-box的以下代码

  <!DOCTYPE html>

  <polymer-element name='test-flex'>
    <template>

      <style>
         .lab-flex-col-container {
           display: flex;
           flex-flow: column;
           align-content: center;
           background-color: gold;
           border-radius:5px;
           margin: 5px;
        }

        .lab-flex-col {
          display:flex;
          flex-flow:column;
          align-self:center;
          margin:5px;
        }

        .margin2 { margin: 2px; }


      </style>

      <form id='form'
        class='form'>

        <div class='lab-flex-col-container'>
           <div class='lab-flex-col' id='hidden-does-not-work' hidden>
              <input id='hidden-works' type='text'>
           </div>

           <div id='hidden-works' hidden>
              <textarea></textarea>
           </div>
           <div id='hidden-does-not-work-here-either' class='lab-flex-col' hidden>
              <button>Save</button>
           </div>

        </div>
      </form>

    </template>

    <script type="application/dart;component=1">

      import 'package:polymer/polymer.dart';
      import 'dart:html';


      @CustomTag( 'test-flex' )
      class TestFlex extends PolymerElement
      {

        TestFlex.created() : super.created();

        ready()
        {
          $['hidden-does-not-work'].hidden = true;
        }

        void syncDb ( Event e, var detail, var target )
        {

        }

        @override
        void enteredView()
        {
           super.enteredView();

           $['hidden-does-not-work-here-either'].hidden = true;

        }
      }

    </script>
  </polymer-element>

Run Code Online (Sandbox Code Playgroud)

为什么lab-flex-col类的存在会阻止隐藏文本输入？我试过隐藏='隐藏',这也不起作用.

当像textarea元素中那样存在hidden时,它按预期工作,但是一旦添加了flex-box类,它就会停止工作并且元素仍然可见.

Answer 1

Håv*_*sen 8

创建一个.hidden类并将display:none其添加到您的 div 类中。

HTML：

<div class='lab-flex-col-container'>
    <div class='lab-flex-col hidden' id='hidden-does-not-work'>
        <input id='hidden-works' type='text'>
    </div>
    <div id='hidden-works' hidden>
        <textarea></textarea>
    </div>
    <div id='hidden-does-not-work-here-either' class='lab-flex-col hidden'>
        <button>Save</button>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS：

.lab-flex-col {
    display: flex;
}

.lab-flex-col.hidden {
    display: none;
}

Run Code Online (Sandbox Code Playgroud)

这是一个工作小提琴：http://jsfiddle.net/2mNux/3/

Answer 2

Joa*_*ous 7

最简单的解决方法是使用属性选择器覆盖整个行为。无需更改文档：

[hidden]{
  display:none;
}

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/mjxcrrve/

我猜默认行为背后的逻辑是允许使用CSS覆盖“隐藏的” html属性。“隐藏”或多或少是隐式的“显示：无”，因此覆盖“显示”样式是自然的选择。但是我同意，修改纯布局会影响可见性似乎是没有思想的。

@ManishShrestha确切地说：之所以起作用，是因为属性选择器通常比类选择器更具体（或者它是在标准中决定的）。优先级仅在选择器级别解决。我们选择用它们修改哪些样式属性是偶然的。 (2认同)

Answer 3

Šim*_*das 6

这完成了工作：

[hidden] {
    display: none !important;
}

Run Code Online (Sandbox Code Playgroud)

请注意，该!important部分对于防止display: none声明被其他 CSS 代码覆盖很重要。

更多信息：https : //meowni.ca/hidden.is.a.lie.html

归档时间：	11 年，3 月前
查看次数：	5172 次
最近记录：	6 年，11 月前