我有一系列CSS六边形.我想对不同的视口宽度应用CSS缩放变换,尽管在我的六边形形状中出现间隙.

这个问题在任何规模值的Firefox上都是最明显的.如果缩放到非整数值,它也会出现在Chrome中.Firefox还在:before和:after伪元素中显示了令人困惑的水平线,尽管这些线位于边框的中心,而不是任何形状的边缘.

片段

我的标记和样式的简化版本如下,还有JS Fiddle.

HTML:

<div class="scale">
    <div class="hex"></div>
</div>

样式:

.scale {
    margin: 8em auto;
    text-align: center;
    -webkit-transform:scale(2.5, 2.5);
   -moz-transform:scale(2.5, 2.5);
    -ms-transform:scale(2.5, 2.5);
     -o-transform:scale(2.5, 2.5);
        transform:scale(2.5, 2.5);
}
.hex {
    position: relative;
    display: inline-block;
    margin: 0 30px;
    width: 60px;
    height: 104px;
    background-color: #000;
    &:before, &:after {
        position: absolute;
        width: 0;
        border: 1px solid transparent;
        border-width: (52px) (30px);
        content: "";
    }
    &:before {
        border-right-color: #000;
        right: 100%;
    }
    &:after {
        border-left-color: #000;
        left: …

问题

我正在处理包含项目列表的HTML电子邮件，并且考虑到电子邮件客户端的限制，我想知道以下设计是否可行。

目前，我为每个项目都有一个表格，其中包含两个单元格（我们将其称为item-table）。第一个单元格（info-cell）的高度可变，包含商品信息和链接。第二个单元格（image-cell）包含图像，并且高度也可变。这个问题与第一个单元格有关。

我有一个嵌套info-cell有两行的表，每行有一个单元格。我们将这些单元格称为info-cell-top和info-cell-bottom。

理想的结果

期望的结果是info-cell-top与的顶部对齐，并与info-cell-bottom的底部对齐info-cell，而与的高度无关item-table。

我尝试过的

由于这是标记的电子邮件，我不能使用rowspan="2"的image-cell解决这个问题。虽然它适用于某些桌面电子邮件客户端，但对于移动客户端，图像单元将完全消失。

我还尝试了info-cell同时使用height="100%"和将内部表拉伸到最大高度height="1"。

这两种解决方案在浏览器中看起来都不错，但不适用于电子邮件。

代码

也可以在jsfiddle上玩。

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #bbbbbb;">
    <tbody>
        <tr>
            <td style="padding: 16px 0px; border-bottom: 1px solid #bbbbbb;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="1">
                    <tbody>
                        <tr>
                            <td style="vertical-align: top;">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%"> …

我正在编写一个脚本来从API中提取和解析开放时间.我使用常规时间在接下来的七天创建了一个对象,然后与我们的假日时间列表进行比较.

如果在这七天中的某一天发生假期,则会使用此数据覆盖开放时间.

    // get regular hours
    var next7days = [];
    var storeday = new Date(2012, 12-1, 5);
    for (var i = 0; i < 7; i++) {
        var dayofweek = (storeday.getDay() + 6) % 7;
        next7days[i] = data.hours.regular_hours[dayofweek];
        next7days[i].date = storeday;
        storeday = new Date(storeday.getTime() + 86400000);
    }

    // get holiday hours
    for (var i = 0; i < data.hours.holiday_hours.length; i++) {

        // this spits out all holidays fine
        console.log('holiday:');
        console.log(data.hours.holiday_hours[i]);

        for (var j = 0; j < …