CSS div在縮小時縮小

Question

我正在爲我的網站的麪包屑使用div。它在瀏覽器窗口的實際大小和放大時保持不變。但是在縮小div時會縮小。

這是我正在使用的代碼。我需要在某處進行編輯嗎？

<style> 

.breadcrumb { 
     list-style: none; 
     overflow: hidden; 
     font: 18px Lucida Sans Unicode; 
     text-align: center; 
} 
.breadcrumb li { 
     float: left; 

} 
.breadcrumb li a { 
     color: white; 
     text-decoration: none; 
     padding: 11px 0 11px 55px; 
     background: #327ea4;     /* fallback color */ 
     background: #327ea4; 
     position: relative; 
     display: block; 
     float: left; 
     width: 15.12em; 
     /*width: 15.1185em;*/ 
     cursor: default; 
     border-top-left-radius: .4em; 
     pointer-events: none; 
} 
.breadcrumb li a:after { 
     content: " "; 
     display: block; 
     width: 0; 
     height: 0; 
     border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
     border-bottom: 50px solid transparent; 
     border-left: 30px solid #327ea4; 
     position: absolute; 
     top: 50%; 
     margin-top: -50px; 
     left: 100%; 
     z-index: 2; 
} 
.breadcrumb li a:before { 
     content: " "; 
     display: block; 
     width: 0; 
     height: 0; 
     border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
     border-bottom: 50px solid transparent; 
     border-left: 30px solid white; 
     position: absolute; 
     top: 50%; 
     margin-top: -50px; 
     margin-left: 1px; 
     left: 100%; 
     z-index: 1; 
} 
.breadcrumb li:first-child a { 
     padding-left: 30px; 
} 
.breadcrumb li:nth-child(2) a  { background:  #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(2) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(3) a  { background:  #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(3) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(4) a  { background:  #7fc1ec; color: #327ea4; cursor: default;} 
.breadcrumb li:nth-child(4) a:after { border-left-color: #7fc1ec; color: #327ea4; cursor: default; } 
.breadcrumb li:last-child a { 
     /*background: white !important;*/ 
     /*color: black;*/ 
     pointer-events: none; 
     cursor: default; 
     border-top-right-radius: .4em; 
} 
.breadcrumb li:last-child a:after { border: 0; } 
    </style> 

<div style="width:75em;" oncontextmenu="return false" > 
    <ul class="breadcrumb"> 
     <li><a href="#">Step 1</a></li> 
     <li><a href="#">Step 2</a></li> 
     <li><a href="#">Step 3</a></li> 
        <li><a href="#">Step 4</a></li> 
    </ul> 

</div> 

在此先感謝。

當你定義元素的高度或寬度在EM的，像下面的代碼片段

Answer 1

...

.breadcrumb li a { 
     color: white; 
     text-decoration: none; 
     padding: 11px 0 11px 55px; 
     background: #327ea4; 
     background: #327ea4; 
     position: relative; 
     display: block; 
     float: left; 
     width: 15.12em; /* <-- RIGHT HERE */ 
     cursor: default; 
     border-top-left-radius: .4em; 
     pointer-events: none; 
} 

...你實際上結合的元素的大小的字體 - 該元素的大小。

當您增加瀏覽器「縮放」時，所發生的一切正在增加字體大小（以像素爲單位）。

實施例：

font-size: 10px，因此width: 2em == width: 20px。

變焦（增大字體大小）

font-size: 12px，因此width: 2emwidth: 24px ==。