Chrome không nhận được đường viền CSS được làm tròn

Question

Tôi đang gặp sự cố khi Chrome hiển thị các góc tròn của tôi trên điều hướng thả xuống mà tôi đã tạo từ đầu. Các góc tròn được hiển thị tốt trong Firefox, nhưng Chrome và IE9 dường như không muốn hiển thị các góc của tôi. Tôi đã thay đổi lời gọi góc tròn của mình thành phần tử <li> cuối cùng trong trình đơn thả xuống cũng như số <a> cuối cùng mà tôi đã hiển thị dưới dạng các khối có thuộc tính chiều rộng và chiều cao, nhưng không có gì có vẻ như là lừa!

Vì vậy, tôi đã tìm tôi sẽ đăng ở đây để xem liệu có ai có thể cho tôi một cú huých đi đúng hướng không.

Trang web vẫn đang trong quá trình phát triển ban đầu, vì vậy đừng lo lắng về các liên kết neo dự phòng.

HTML của tôi:

<nav> 
     <ul id="mainNav"> 
      <li> 
       <a href="highlevel.html" class="autos"></a> 
       <ul> 
        <li><a href="subcategory.html">News</a></li> 
        <li><a href="subcategory.html">Reviews</a></li> 
        <li><a href="subcategory.html">Car Tech</a></li> 
        <li><a href="subcategory.html">Fuel Economy &amp; Safety</a></li> 
        <li><a href="subcategory.html">Buying &amp; Selling</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="lifestyles"></a> 
       <ul> 
        <li><a href="subcategory.html">Music</a></li> 
        <li><a href="subcategory.html">Food</a></li> 
        <li><a href="subcategory.html">Travel</a></li> 
        <li><a href="subcategory.html">Shopping</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="people"></a> 
       <ul> 
        <li><a href="subcategory.html">Who You Know</a></li> 
        <li><a href="subcategory.html">Who You Should Know</a></li> 
        <li><a href="subcategory.html">Everyone Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="tech"></a> 
       <ul> 
        <li><a href="subcategory.html">Business</a></li> 
        <li><a href="subcategory.html">Pleasure</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="highlevel.html" class="trends"></a> 
       <ul> 
        <li><a href="subcategory.html">Online</a></li> 
        <li><a href="subcategory.html">Offline</a></li> 
        <li><a href="subcategory.html">Everything Else</a></li> 
       </ul> 
      </li> 
     </ul> 
    </nav><!-- /Main Nav --> 

CSS của tôi:

nav { 
    display:block; 
    position:relative; 
    width:980px; 
    height:41px; 
    background:url(../../images/nav_bg.png) center top no-repeat; 
    margin:0 auto; 
    border-bottom:2px solid #777; 
    z-index:9998; 
} 

#mainNav { 
    display:block; 
    position:relative; 
    background:#fff; 
} 

#mainNav li { 
    float:left; 
} 

#mainNav li a { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    overflow:hidden; 
} 

#mainNav li a.autos { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav1.png) center top no-repeat; 
} 

#mainNav li a.autos:hover { 
    background:url(../../images/nav1.png) center -41px no-repeat; 
} 

#mainNav li a.lifestyles { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav2.jpg) center top no-repeat; 
} 

#mainNav li a.lifestyles:hover { 
    background:url(../../images/nav2.jpg) center -41px no-repeat; 
} 

#mainNav li a.people { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav3.jpg) center top no-repeat; 
} 

#mainNav li a.people:hover { 
    background:url(../../images/nav3.jpg) center -41px no-repeat; 
} 

#mainNav li a.tech { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav4.jpg) center top no-repeat; 
} 

#mainNav li a.tech:hover { 
    background:url(../../images/nav4.jpg) center -41px no-repeat; 
} 

#mainNav li a.trends { 
    display:block; 
    position:relative; 
    width:125px; 
    height:41px; 
    background:url(../../images/nav5.jpg) center top no-repeat; 
} 

#mainNav li a.trends:hover { 
    background:url(../../images/nav5.jpg) center -41px no-repeat; 
} 

/* === Dropdown Menu Styles === */ 

#mainNav ul { 
    display:none; 
    position:absolute; 
    z-index:9998; 
} 

#mainNav li:hover ul { 
    display:block; 
    position:absolute; 
    width:160px; 
    height:auto; 
    border-right:1px solid #999; 
    border-left:1px solid #999; 
    overflow:hidden; 

    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 7px; 
    -moz-border-radius-bottomleft: 7px; 
    -webkit-border-radius: 0px 0px 7px 7px; 
    border-radius: 0px 0px 7px 7px; 

    -webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
    -moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
    box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25); 
} 

#mainNav li:hover ul li a { 
    display:block; 
    width:160px; 
    height:auto; 
    background:#fff; 
    padding:5px 0; 
    border-bottom:1px solid #999; 

    font-family: 'Swiss721Light', Verdana, Arial; 
    text-indent:10px; 
    text-decoration:none; 
    font-size:14px; 
    line-height:16px; 
color:#555; 
} 

#mainNav li:hover ul li a:hover { 
    background:#eaeaea; 
} 

Answer 1

Bạn có thể làm điều đó như thế này:

#mainNav li:hover ul li:last-child a{ 
    border-radius: 0px 0px 7px 7px;  
} 

Bạn cũng cần phải thoát khỏi 40px padding-left trên chứa ul

Thêm padding để phía dưới là tốt, nhưng làm cho nó trông một chút lộn xộn đặc biệt là nếu bạn đang sử dụng đường viền quanh các liên kết riêng lẻ

Answer 2

Chrome và IE không che giấu nội dung mà tràn bán kính biên giới. Các liên kết thả xuống của bạn hiện được đặt thành background: white; và liên kết dưới cùng sẽ tràn qua đường viền được làm tròn. Do đó, nền trắng của liên kết sẽ được hiển thị trên cạnh của đường viền tròn. Để khắc phục điều này, bạn có thể xóa nền của liên kết hoặc thêm phần đệm vào cuối trình đơn thả xuống. Một tùy chọn khác là đặt bán kính đường viền của a cuối cùng trong mỗi trình đơn thả xuống.

Change background:

#mainNav li:hover ul li a { 
    background: #fff; /* remove this line */ 
    border-bottom: ... /* change to border-top */ 
} 

Padding:

#mainNav li:hover ul { 
    ... 
    padding-bottom: 7px; 
} 

Answer 3

nó là một vấn đề tràn .. tất cả các yếu tố bên trong hộp tròn cần bán kính biên giới cùng

http://jsfiddle.net/pixelass/KZXnT/

#mainNavli > ul > li.last, 
#mainNav > li ul > li.last a { 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 7px; 
    -moz-border-radius-bottomleft: 7px; 
    -webkit-border-radius: 0px 0px 7px 7px; 
    border-radius: 0px 0px 7px 7px; 
}