Question

这很奇怪。我有一个选择菜单，我已经设置为显示分层列表。我有多个Firefox配置文件设置来模拟多个会话。一个是我的主要＆＃34;包含大量扩展和自定义的配置文件。但是，这就是我的样式菜单在我的＆＃34; main＆＃34;使用安全模式时的配置文件（编辑：Firefox的安全模式，禁用扩展并重置配置）这是一个干净的，缓存的Firefox配置文件中的样子：为了便于比较，Chrome和IE将它放在中途：我已经得到-moz-appearance：none和-webkit-appearance：none;对于＆lt; select＆gt;和＆lt;选项＆gt;元素。选项上的左偏移量是使用padding-left实现的。最令人困惑的是它如何在一个Firefox配置文件中工作（在安全模式下），但不是一个完全干净的配置文件。如何使这一点像所有浏览器中的第一个示例一样？编辑：小提琴

Answer 1

在我看来，你有3种选择：

Pure Html：

在较低级别的选项之前添加空白的不间断空格 并按照这种方式执行：不完全符合您的时间，并且看起来有点混乱，但可以正常工作。

纯CSS：

根据级别（doesn't seem to work - already tried it）

Jquery / Javascript：可能是最快捷的方式！如果你愿意使用jquery [或者你可以用普通的js来做，但我已经使用jquery做了小提琴..]：使用其他类添加层次结构指示符，具体取决于层次结构See fiddle或片段

＆＃13;

$(document).ready(
  function() {
    $('.l2').each(
      function() {
        $(this).text('--' + $(this).text());
      }
    );

    $('.l3').each(
      function() {
        $(this).text('----' + $(this).text());
      }
    );
  }
);

＆＃13;

#hierarchy,
#hierarchy>option {
  text-align: justify;
  text-shadow: 1px 1px grey; /*optional!*/
  word-spacing: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="hierarchy" name="hierarchy">
  <option class="l1" selected>Level 1</option>
  <option class="l2">First L2 Indent</option>
  <option class="l3">First L3 Indent</option>
  <option class="l2">Second L2 Indent</option>
  <option class="l3">Second L3 Indent</option>
  <option class="l3">Third L3 Indent</option>
</select>

＆＃13;

<select>菜单的CSS工作......有时候

1 个答案: