我的网站在 Firefox 中无法运行 - 文本超出边距

Posted 2023-03-06

【中文标题】我的网站在 Firefox 中无法运行 - 文本超出边距

【英文标题】：my website doesn't work in firefox - text going beyond margin

【发布时间】：2015-12-13 17:33:34

【问题描述】：

我设计了一个动态的网站，以便浏览器的宽度可以调整内容。但是在这个特定页面上，Firefox 中浏览器的大小只会给我带来问题：

在调整屏幕大小时，文本超出了它的边距并与 Firefox 上的图像发生冲突。试试看，让我知道。 css 也很简单。

.nav-phone>a:nth-child(3) 
    background-color: #fbc076;


.nav>a:nth-child(3) 
    background-color: #fbc076;


.newbox 
    background-color: white;
    display: block;
    margin: auto;


.readiblecolumns 
    background-color: white;


.readiblecolumns>p 
    line-height: 1;


/* Desktop */
@media screen and (min-width: 960px) 

    .newbox 
        height: auto;
        width: 80vw;
    

    /* Reads Like Newspaper */
    .readiblecolumns 
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    

    .readiblecolumns>p 
        font-size: 100%;
    

    .profile 
        height: 480px;
        margin-bottom: 20px;
    

    .profile img 
        height: 100%;
        width: auto;
        margin-bottom: 20px;
    



/* Tablet */
@media screen and (min-width: 520px) and (max-width: 959px) 

    .newbox 
        height: auto;
        width: 80vw;
    

    .readiblecolumns 
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    

    .readiblecolumns>p 
        font-size: 100%;
    

    .profile 
        height: 320px;
        margin-bottom: 20px;
    

    .profile img 
        height: 100%;
        width: auto;
        margin-bottom: 20px;
    



/* Phone */
@media screen and (max-width: 519px) 

    .newbox 
        height: auto;
        width: 90vw;
    

    .readiblecolumns 
        width: 90vw;
        padding: 15px;
    

html如下：

<div class="newbox">
    <div class="readiblecolumns">
        <div class="profile">
            <img src="Pictures/MyLife/mypicture.jpg" >
        </div>
        <p>Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossima's cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they're decent people here (and the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I won't argue, I'll fall in with everything, I'll win them by politness, and show them that I've nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this affair, just as they have."</p>
    </div>
</div>

【问题讨论】：

请在您的问题中以尽可能短的格式包含您的代码。外包链接可能会过时和丢失，因此会删除您问题中的内容。

它没有过时也没有丢失，我今天早些时候在域工作

@Max 重点是：一旦你更正了你的网站，这个问题就完全没有意义了。

我上传了 css，但您很容易在页面上发现，我不喜欢对我的问题投反对票，因为这是一个我不理解的严重问题

@Max 同样，一旦您更正它“在页面上”，相关的 CSS 将不再是“在页面上”，从而使您的问题对未来的访问者毫无用处。

【参考方案1】：

它与.profilewidth:480px;有关，然后制作.profile imgheight:100%; width:auto;。当浏览器大小改变宽度时，图像仍然基于.profile 的 100% 高度（可能根本没有改变），因此它不会按照您想要的方式缩放。无论如何，您的图像应该真正适合矢量缩放的原始页面加载设计。给.profile设置合适的高宽，就可以设置.profile imgheight:100%; width:100%;了。