所以我正在制作一个项目致敬页面,当我开始写css时,我首先用firefox设备工具栏检查它,但当我在chrome上打开相同的代码时,我给img流体类的图像占据了它原来的全宽(1065px(div#内容位于一个div内,该div包含.ccontainer流体
这就是它在铬上的样子
这就是它在firefox 上的样子
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption><a href="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">Why I Write</a></figcaption>
</figure>
</div>
</div>
edit:好吧,所以我开始在一个新文件中添加元素,看看错误什么时候开始发生,当我粘贴#Home后面的部分时,也就是#Bio。我会编辑代码,这样你就可以看到下面的部分,因为我仍然不知道为什么它会导致问题
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption><a href="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">Why I Write</a></figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
尝试在css文件中添加规则:
<style>
figure .img-fluid {
width: 100%;
}
</style>
我确信这对你有用。
因此,在一个接一个地删除并添加元素后,我意识到#Homediv后面的部分上的图像没有.img流体我不知道为什么这在firefox上不是一个问题,但我已经在两个浏览器上测试了代码,它运行正常。