php - 为什么它在 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 一起使用，你应该查看我写的一个包来解决这样的问题，PHPFUI .它是一个完全面向对象的 PHP 解决方案，用于使用 PHP 生成网页。基本上你使用框架中的模式来解决这样的问题。我用 PHP 包装了所有基本的 Foundation 概念，所以您甚至不需要弄清楚 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;

非常简单!