为什么它在chrome（仅在Windows中）和Firefox样式规则中看起来不同？

Question

我想创建一个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上也能正常工作。

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

Answer 1

如果您将PHP与Zurb's Foundation一起使用，则应签出https://packagist.org/packages/phpfui/phpfui这是使用PHP生成网页的完全面向对象的PHP解决方案。

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

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;

非常简单！