與Firefox相比,我在Chrome上顯示的logo圖像有很大的不同(我在Firefox上做了我的測試服務器,然后在Chrome上運行)
以下是兩個不同之處: 火狐瀏覽器
鉻
它應該像在Firefox中一樣出現。我切換了徽標并添加了圖像特征以使其適合,而不是編輯CSS文件。
代碼如下:
<a class="navbar-brand" href="index.html"><img src="img/logo09.png" width="250%" height="250%" alt="logo"></a>
有沒有快速解決這個問題的方法?提前感謝任何幫助:)
使用樣式表,內聯樣式或維度屬性是一場維護噩夢...
height: 123px; /*or any other fixed/dynamic value, unit*/
width: auto; /*let the browser do the scaling */
會有所幫助(除非你遇到了特殊性問題)
另外,要知道在HTML中,屬性width= " "和height= " "上不允許有5 %
https://developer . Mozilla . org/en-US/docs/Web/HTML/Element/img
& ltimg & gt屬性 寬度 圖像的固有寬度,以HTML5 CSS像素為單位,或以HTML 4像素或百分比為單位。
高度 圖像的內在高度,以HTML5 CSS像素為單位,或以HTML 4像素或百分比為單位。
對于鉻來說,這是一個非常愚蠢的問題。我會假設這是你特別提到的,因為我最近遇到了類似的問題。 鉻自動適用
img {
overflow: clip;
}
你要做的就是用overflow: hidden覆蓋它;。
我不能告訴你為什么它會斷裂,但這是我最好的理論: 我假設這打破了溢出-剪輯-邊緣:內容框;屬性,該屬性在某些方面可能等同于框大小:content-box;至少在行為上。這又是一個相當牽強的說法,但在我看來這是最合理的解釋,請隨時糾正我。
您可能遇到的問題可能與您使用百分比有關。你把它們設置為250%,但是什么的百分比?它應該是父元素,但是父元素設置為什么?圖像的父元素是沒有寬度設置的錨元素,并且不是塊級元素。
嘗試將父元素設置為某個固定的寬度,看看問題是否會消失,或者兩個瀏覽器是否顯示相同的內容。
例如,我將封閉錨元素設置為display:block;并將其寬度設置為500像素。
用固定像素寬度替換百分比寬度。Firefox和Chrome注冊的%度量不同,因為容器的布局略有不同。此外,將度量值添加到一個類中,然后給它一個!重要屬性。我相信Chrome有一個css文件,它用在所有訪問過的網站上,它給出了一些設計布局等。
更新: 在您的注釋之后,嘗試在開發人員工具中查看該元素,看看是否有東西覆蓋了它。如果沒有,那么我不知道該建議什么。也許可以用不同的設計,比如一個元素在里面的居中的div,或者使用一個帶有這個標志的navbar,或者一個沒有導航欄的居中標志。有很多選擇。抱歉,我幫不上什么忙