为什么它在 chrome（仅在 windows 上）和 firefox 我的样式规则中看起来不同？答案

【问题标题】：Why it looks different in chrome (only on windows) and firefox my style rules?为什么它在 chrome（仅在 windows 上）和 firefox 我的样式规则中看起来不同？
【发布时间】：2020-02-15 23:22:50
【问题描述】：

我想创建一个div，其中图像位于左侧，文本位于右侧。我想用PHP 创建这个。在 Firefox 中看起来像这样：但在 Windows 上的 Chrome 中情况有所不同：但在 Ubuntu 上却完全正确！我用这个 PHP 脚本创建了 HTML：

echo'<div class="callout large clearfix card">';
echo'<div class="float-left">';
echo '<img src="img/'.$card['cardimg'].'">';
echo '</div>';  
echo'<div class="float-right carddescription">';
echo '<div class="title">';
echo $card["description"];
echo "</div>";
echo "<br>";
echo '<div class="additionalinfo">';
echo htmlspecialchars_decode($card["additionalinfo"], ENT_QUOTES);
echo '</div>';  
echo "<br>";
echo '<div class="creator">';
echo "creator: ".$card["uploader"];
echo '</div>';  
echo '</div>';  
echo '</div>';

我使用基础 CSS 有以下几条规则：

@media screen and (min-width: 800px) {
   .card{
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .card img{
        max-width: 20em;
        height: auto;
    }

    .card .carddescription{
        max-width: 70%;
    }

    .card .title{
        font-size: 2.5em;
        background-color: black;
        color: white;
        padding-left: 5%;
        padding-top: 1%;
        padding-bottom: 1%;
    }

    .card .additionalinfo{
        font-weight: bold;
        padding-top: 1%;
    }

    .card .creator{
        padding-top: 2%;
        text-align: right;
        font-style: italic;
    }
}

对于较小的屏幕，我也有非常相似的规则，但正如我所见，它们在 Chrome 上也能正常工作。

为什么会发生这种情况？据我所知，我不使用任何特定于浏览器的规则。我怎么解决这个问题？

【问题讨论】：

您是否在为您的基础 CSS 样式表使用外部 URL？（即使用托管在另一个域名的某个cdn上的基础css / js）
@KoalaYeung 没有，我下载它是为了减少加载时间
尝试使用开发人员工具检查您的页面。查看您是否在开发者控制台或网络检查器中收到任何错误消息。
@KoalaYeung 我没有收到任何错误

标签： php css windows google-chrome zurb-foundation

【解决方案1】：

如果您使用带有Foundation CSS framework 的PHP，您应该查看我为解决此类问题而编写的一个包PHPFUI。它是一个完全面向对象的 PHP 解决方案，用于使用 PHP 生成网页。基本上你使用框架中的模式来解决这样的问题。我将所有基本的 Foundation 概念都包装在 PHP 中，因此您甚至不需要弄清楚 HTML，它会变得非常粗糙。当然，您可以手动编写所有 HTML，但何必费心呢？这是一个已解决的问题。出于同样的原因，您不编写汇编语言，我们有工具（语言，包括标记）来抽象所有这些。只需写下概念，让工具完成工作。

要做你想做的，它看起来像这样：

namespace PHPFUI;

// Your autoloader here
include '../vendor/autoload.php';

$page = new Page();
$page->addStyleSheet('/css/styles.css');

$mainColumn = new \PHPFUI\Cell(12);
$mainColumn->addClass('main-column');

$gridX = new GridX();

$colA = new Cell(4);
$colA->add(new Image('https://foundation.zurb.com/sites/docs/assets/img/rectangle-1.jpg'));
$gridX->add($colA);

$colB = new Cell(8);
$colB->add(new SubHeader('PHPFUI Rules!'));
$colB->add('This is some text next to the photo on the left');

$gridX->add($colB);

$page->add($gridX);

echo $page;

很简单！

【讨论】：