为什么它在 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 和 Foundation CSS framework, you should check out a package I wrote to address problems like this, 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;

很简单！

为什么它在 chrome（仅在 windows）和 firefox 中看起来不同？

Why it looks different in chrome (only on windows) and firefox my style rules?

css

php

windows

google-chrome

zurb-foundation