Câu hỏi này có vẻ hơi điên rồ, nhưng tôi muốn giải thích rõ ràng mọi thứ.Tại sao nút này không mở rộng đến độ rộng của nội dung trong Firefox giống như trong các trình duyệt khác?
Kết quả mong muốn
Tôi có thanh menu ngang với menu phụ. Tôi đã tạo nó từ đầu, vì vậy tôi không sử dụng bất kỳ khung công tác hiện có nào. Nó sử dụng kết hợp các nút, neo và nhịp để đánh dấu ngữ nghĩa.
- neo cho các hạng mục đó đi đến một trang mới
- nút cho các hạng mục mà đừng đi đâu cả nhưng có menu con
- nhịp cho các hạng mục tàn tật
Lưu ý: Trang web này là một số lượng người dùng cụ thể có giới hạn vì vậy tôi không quan tâm đến việc thiếu khả năng truy cập.
Menu phụ phải rộng bằng mục menu rộng nhất chứa trong đó. Và mỗi mục menu phải điền vào chiều rộng của menu con sao cho con trỏ và các đường nét tiêu điểm hiển thị như mong muốn.
Vấn đề
Trong Firefox, một menu con không mở rộng đến chiều rộng của mặt hàng rộng nhất trong các tình huống sau:
- menu con là hoàn toàn vị trí
- menu con được chứa trong một khối có vị trí khác với static
- menuitem dài nhất là một nút
Tôi đã thử nghiệm với Chrome, IE 8, Firefox 12 và Firefox 20. Nó hiển thị như mong muốn trong Chrome và IE, nhưng không hiển thị trong cả hai phiên bản của Firefox.
Tôi đã tạo phiên bản thu nhỏ với JavaScript, hình ảnh, mục bị vô hiệu hóa và nhiều mục menu đã bị xóa. Mã dưới đây và cũng trên jsFiddle. Dưới đây là một ảnh chụp màn hình trong Firefox 20.
Lưu ý cách Titles Mục mục được squished. Menu phụ chỉ rộng bằng Tiêu đề trang mục (có đệm). Cũng lưu ý rằng đây không phải là vấn đề trong menu con cấp cao nhất - trình đơn đó được mở rộng tới chiều rộng Tùy chỉnh tiêu đề PDF.
Các tiêu đề mục Mục là một nút. Nếu tôi thay đổi nó thành một neo, menu con sẽ mở rộng như mong muốn. Nếu tôi thay đổi nút CSS để xóa width: 100%, thì menu phụ sẽ mở rộng như mong muốn. Nhưng sau đó, các mục menu hẹp hơn menu phụ không còn lấp đầy chiều rộng (ngay cả khi tôi thêm display: block).
Đây là ảnh chụp màn hình về cách sửa lỗi ngắt các phần khác của trình đơn.
Lưu ý cách con trỏ không phải là con trỏ khi di chuột ra ngoài văn bản.Có, tôi có thể khắc phục điều đó bằng cách thay đổi con trỏ cho số li, nhưng vấn đề khác là phác thảo tiêu điểm. Tôi muốn các phác thảo tập trung được xung quanh toàn bộ mục trình đơn không chỉ là văn bản (đó là cách nó hoạt động với width: 100%).
Tôi cũng đã thử chơi xung quanh với -moz-box-sizing, nhưng vẫn không có niềm vui.
Cách giải quyết đơn giản, đối với trường hợp cụ thể này, tôi vừa thêm một vài số vào Tiêu đề trang để làm cho dài hơn. Nhưng giải pháp đó sẽ không hoạt động khi trình đơn được tạo động.
HTML Mã (jsFiddle)
<ul id="navAdminMenu">
<li><a href="#">Companies</a></li
><li class="hasSubmenu"><button type="button">Books</button>
<ul>
<li><a href="#">Manage Books</a></li
><li><a href="#">PDF Profiles</a></li
><li class="hasSubmenu"><button type="button">Customize PDF Titles</button>
<ul>
<li><a href="#">Page Titles</a></li
><li class="hasSubmenu"><button type="button">Section Titles</button>
<ul>
<li><a href="#">Profile Section</a></li
><li><a href="#">Index Section</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li
><li class="hasSubmenu"><button type="button">Lists</button>
<ul>
<li class="hasSubmenu"><button type="button">Categories</button>
<ul>
<li><a href="#">Manage</a></li
><li><a href="#">Reports</a></li>
</ul>
</li
><li><a href="#">Key Contact Positions</a></li>
</ul>
</li>
</ul>
CSS Mã
#navAdminMenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
list-style: none;
margin: 0;
padding: 0;
background-color: #efefef;
}
#navAdminMenu button {
margin: 0;
padding: 0;
vertical-align: baseline;
border: none;
background-color: transparent;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
#navAdminMenu button::-moz-focus-inner {
padding: 0;
border: none;
}
#navAdminMenu a {
text-decoration: none;
}
#navAdminMenu li {
display: inline-block;
margin: 0;
border-right: 1px solid #ccc;
}
#navAdminMenu li:hover {
background-color: #4b545f;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
display: inline-block;
height: 2.3em;
line-height: 2.6;
padding: 0 10px;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
color: #06c;
}
#navAdminMenu > li > button:focus, #navAdminMenu > li > a:focus {
outline: 0; /* Firefox displays outline outside the menu box-shadow */
box-shadow: 0 0 0 3px #06c;
}
#navAdminMenu > li:hover > button, #navAdminMenu > li:hover > a {
color: #fff;
}
#navAdminMenu > li.hasSubmenu > button:after {
content: "v";
display: inline-block;
width: 13px;
margin-left: 5px;
}
#navAdminMenu ul {
display: none;
position: absolute;
padding: 0;
background-color: #5f6975;
}
#navAdminMenu li:hover > ul {
display: block;
}
#navAdminMenu ul > li {
display: block;
position: relative;
border-top: 1px solid #999;
border-bottom: 1px solid #000;
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
height: 2em;
line-height: 2;
padding: 0 30px 0 10px;
white-space: nowrap;
}
#navAdminMenu ul > li > button {
width: 100%; /* full width of submenu */
text-align: left;
}
#navAdminMenu ul > li > a {
display: block; /* full width of submenu */
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
color: #fff;
}
#navAdminMenu ul > li > button:focus, #navAdminMenu ul > li > a:focus {
outline: #fdcb01 solid 3px;
}
#navAdminMenu ul > li.hasSubmenu > button:after {
content: ">";
width: 16px;
position: absolute;
right: 0;
}
#navAdminMenu ul ul {
left: 100%;
top: 0;
}
Câu hỏi
Có một cái gì đó đơn giản tôi đang thiếu? Hoặc tôi có nên báo cáo điều này là một lỗi cho Mozilla không?
Lưu ý: Tôi không muốn thay đổi các nút thành neo.
cảm ơn bạn, tôi dành 5 giờ để tìm hiểu điều này cho đến khi tôi tìm thấy câu trả lời của bạn – Ulterior