Question

我读到Firefox和Opera不会尊重max-width属性，除非你在包含DIV中添加“display：table”和“table-layout：fixed”。所以在我的DIV中我放了

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #ffffff;
    color: #000000;
    display: table;
    table-layout: fixed;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 580px;
}

但是，在Firefox上，DIV仍未扩展到最大宽度达到580像素 - https://jsfiddle.net/4sjxum1k/11/。如何在保持容器居中于屏幕中间（以及单行中的搜索元素）的同时实现这一目标？

Answer 1

由于您的div使用的是绝对定位，因此它没有默认width，并且只会达到容纳其内容所需的大小，直到您指定的max-width ，或者尽可能小以适应可用空间。要解决此问题，以便它始终展开以填充可用空间，直到指定的max-width，只需添加width属性，使其值为100％ - 不需要任何一个表属性。

body {
  background-color: grey;
}
#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width:100%; /* ADD THIS */
  max-width: 580px;
}
#searchForm {
  padding: 20px;
  background-color: orange;
}
.searchField {
  display: table-cell;
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  vertical-align: middle;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results
    <br>
    <div style="vertical-text-align:center;">
      <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
        <input name="utf8" type="hidden" value="✓">
        <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:23%" />
        <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:23%">
        <input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width:40%">
        <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
      </form>
    </div>
  </div>
</div>

即使在添加＆＃34; display：table＆＃34;和＆＃34; table-layout：fixed＆＃34;，我无法让Firefox尊重＆＃34; max-width＆＃34;属性

1 个答案: