为啥 div 位置在不同的语言环境中发生变化？

Posted 2023-03-06

【中文标题】为啥 div 位置在不同的语言环境中发生变化？

【英文标题】：Why div position is changing in different locale?为什么 div 位置在不同的语言环境中发生变化？

【发布时间】：2021-12-20 02:52:17

【问题描述】：

我在多个语言环境项目中工作，我对所有语言环境（48 个语言环境）使用相同的 CSS。 但是在某些区域设置中，div 位置会自动更改，我该如何解决。

例如 : en_gb, de_de 工作正常，但 sv_se 语言环境给出了不同的 div 位置输出。

1.en_gb 截图

sv_se截图

@media only screen and (max-width: 920px)  

    .blahyear,
    .termscondition,
    .privacy,
    .generaldata 
        padding:0% 5% 2% 7%;
    


@media only screen and (max-width: 415px) 
    .blahyearmargin-top: 97px;;
    .privacymargin-top: -139px;
    .generaldatamargin-top: -101px;
    .termsconditionmargin-top: 136px;
        margin-left: -162px;
    .footerNav margin-top: 20px;

<div class="footerText footerNav">
                <ul id="footer_ul">
                    <li class="blahyear"><a (click)="reloadIfSamePage($event);" id="blah" i18n="@@blahblah">blah-blah showYear</a></li>
                    <li class="termscondition"><a (click)="reloadIfSamePage($event);" id="footerTerms" i18n="@@terms_conditions">TERMS AND CONDITIONS</a></li>
                    <li class="privacy"><a (click)="reloadIfSamePage($event);" i18n="@@information_privacy">YOUR INFORMATION AND PRIVACY</a></li>
                    <li class="generaldata"><a (click)="reloadIfSamePage($event);" i18n="@@data_protection">GENERAL DATA PROTECTION REGULATION</a></li>
                </ul>
            </div>

【问题讨论】：

这里添加了CSS和html

【参考方案1】：

这是因为当使用% 中的值时，测量是相对于容器的width/height 进行的（也可以是主体）。因此，如果您调整浏览器窗口的大小，尺寸会发生变化，因此测量值也会发生变化。

这里的测量值会根据身体而变化。

为了防止这种情况，您可以在px cm ..... 在padding 属性中使用绝对值

@media only screen and (max-width: 920px) 
  .tomtomyear,
  .termscondition,
  .privacy,
  .generaldata 
    padding: 0 5px 2px 7px;
  


@media only screen and (max-width: 415px) 
  .tomtomyear 
    margin-top: 97px;
    ;
  
  .privacy 
    margin-top: -139px;
  
  .generaldata 
    margin-top: -101px;
  
  .termscondition 
    margin-top: 136px;
    margin-left: -162px;
  
  .footerNav 
    margin-top: 20px;
  

<div class="footerText footerNav">
  <ul id="footer_ul">
    <li class="tomtomyear"><a (click)="reloadIfSamePage($event);" id="tomtom" i18n="@@tomtom">&copy;TOMTOM showYear</a></li>
    <li class="termscondition"><a (click)="reloadIfSamePage($event);" id="footerTerms" i18n="@@terms_conditions">TERMS AND CONDITIONS</a></li>
    <li class="privacy"><a (click)="reloadIfSamePage($event);" i18n="@@information_privacy">YOUR INFORMATION AND PRIVACY</a></li>
    <li class="generaldata"><a (click)="reloadIfSamePage($event);" i18n="@@data_protection">GENERAL DATA PROTECTION REGULATION</a></li>
  </ul>
</div>