小编Jam*_*lly的帖子

我创建了一个小的搜索小部件,但是通过chrome查看它时不会出现背景.我已经测试了IE,FF和safari,它们都显得很好.

http://paradigmsearch.co.uk/widget/?id=1

我通常不愿意在SO上放置布局问题.但是,我已经讨论了一段时间了.

在元素上:

<div class="widget" id="id_300x250">

我正在应用以下CSS定义

.widget {
  font-family: arial;
  height: 250px;
  width: 300px;
  border: none;
  background: url('/uploads/widget_background/cached/proportional/300x250/1_512648b566578.png') no-repeat center center;
}

背景只是不可见.如果这是一个非常愚蠢的标记/ css疏忽,那么我道歉.

目前使用的是Chrome浏览器版本25.0.1364.172m

我试图在不使用JavaScript或JQuery的情况下设计表单.它包括一系列复选框.如果未选中,则在复选框后显示某个gif.否则,之后不显示任何内容.这是我的代码:

input[type=checkbox]::after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:15px;
  z-index:100;
}
input[type=checkbox]:checked::after
{
  content:"";
}

它适用于Chrome,但似乎不适用于Firefox或IE.怎么了？

我有一个figure可旋转(在任何程度上通过用户输入)这个旋转使用transition属性可见地旋转.当此元素旋转超过90deg/-90deg时,元素的背面可见.我想要将这个通常隐藏的元素的样式设置为不同于正面样式的样式,但我不确定如何实现这一点.

figure {
    background:#fff;
    color:#000;
    border:1px solid #000;
    transition:1s;
}

figure:hover {
    transform:rotateY(180deg);
}

当前样式(浏览器默认值):

期望的风格:

有什么方法可以将元素的背面与前面的方式区别开来？

这是这个轮换的基本JSFiddle演示(悬停):http://jsfiddle.net/Y89t3/

我正在使用一个使用jQuery的滑块.滑块的某些元素正常工作,但有一个问题,我正在尝试使用某些代码进行故障排除.为了测试它,我希望能够在语句中显示变量的值.

这是我正在使用的代码块:

$('.marquee_nav a.marquee_nav_item').click(function(){
        $('.marquee_nav a.marquee_nav_item').removeClass('selected');
        $(this).addClass('selected');

        var navClicked = $(this).index();
        var marqueeWidth = $('.marquee_container').width();
        var distanceToMove = marqueeWidth * (-1);
        var newPhotoPosition = (navClicked * distanceToMove) + 'px';
        var newCaption = $('.marquee_panel_caption').get(navClicked); 

        $(' .marquee_photos').animate({left: newPhotoPosition}, 1000);
        });

我添加了一个名为'test'的div,我想显示变量的值,以确保它们返回预期的结果:

<div class="test"><p>The value is: <span></span></p></div>

例如,要测试值,我将其插入上面的语句中:

$('.test span').append(marqueeWidth);

但是,我没有得到任何结果.在该代码块中包含测试以确保获得预期结果的正确方法是什么？

谢谢.

在Internet Explorer 11中,如果您具有以下内容:

<input type="number" min="1" max="12" pattern="[0-9]*" >

当用户尝试输入字母而不是数字时,浏览器只会清除输入.这种行为是不可取的,因为我希望我们的验证处理这个,而不是浏览器自动为我做这件事.

有人知道如何改变这种行为吗？

我正在使用数字输入类型进行验证,并在iOS中获得正确的键盘.

JSFiddle演示.

我正在使用Raleway字体,但此字体不能正确对齐字母.

您可以在此代码段中看到此内容:

    h1 {
      font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
    }

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>

我能轻易解决这个问题吗？或者这只是一个错误的字体,我应该选择另一个？

为了让生活变得困难,我正在努力的客户使用的是一个在PHP4.0上运行的非常大的旧系统,他们不想添加任何额外的库.

我正在尝试通过PHP发送一封包含附件和附带的text/html内容的电子邮件,但我无法通过一封电子邮件发送这两封邮件.

这会发送附件:

$headers = "Content-Type: text/csv;\r\n name=\"result.csv\"\r\n Content-Transfer-Encoding: base64\r\n Content-Disposition: attachment\r\n boundary=\"PHP-mixed-".$random_hash."\"";
$output = $attachment;

mail($emailTo, $emailSubject, $output, $headers);

这发送text/html:

$headers = "Content-Type: text/html; charset='iso-8859-1'\r\n";
$output = $emailBody; // $emailBody contains the HTML code.

这会发送包含text/html的附件以及附件内容:

$headers = "Content-Type: text/html; charset='iso-8859-1'\r\n".$emailBody."\r\n";
$headers = "Content-Type: text/csv;\r\n name=\"result.csv\"\r\n Content-Transfer-Encoding: base64\r\n Content-Disposition: attachment\r\n boundary=\"PHP-mixed-".$random_hash."\"";
$output = $attachment;

我需要知道的是如何在电子邮件正文中发送带有text/html的电子邮件,并为其添加附件.我确定我在这里错过了一些非常简单的东西!

提前致谢.

这是一个我不太了解的关于z-index和css伪元素:: before/:: after的行为.

它在这个jsfiddle上有说明:http://jsfiddle.net/jgoyon/T6QCf/

我创建了一个定位框并使用:: after伪元素添加内容(也定位).

• 如果我将一个z-index设置为:: after伪元素,一切都运行良好我可以通过播放z-index将其放在父节点之上或之下

    #no-z-index {
      background:lightblue;
      width:100px;
      height:100px;
      position:relative;
    }
    #no-z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

• 如果我这样做并设置父级的z-index,它就不再起作用了.

    #z-index {
      background:lightblue;
      left:200px;
      width:100px;
      height:100px;
      position:relative;
      z-index:0; /* parent z-index */
    }
    #z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

这是预期的行为吗？

您可能知道,如果您要使用:before和/或:after伪元素而不在其中设置文本,您仍然必须声明content: '';它们以使它们可见.

我刚刚将以下内容添加到我的基本样式表中:

*:before, *:after {
    content: '';
}

......所以我不必再进一步申报了.

除了*选择器是反性能的事实,我知道(让我们说以上是一个例子,我可以找到一个更好的方法来声明这个,比如列出标签),这真的很慢事情发生了？我在目前的项目中没有注意到任何东西,但我想确保在我将它坚持到我的基本样式表之前使用是安全的,我将用于每个项目......

有没有人测试过这个？你有什么话要说的？

(顺便说一句,我 确实知道正确的语法CSS3采用双分号(::before,::after),因为这些都是pseudoelements,而不是伪类).

我有一个<a>元素,之后我想>使用:after伪元素显示一个符号.

该<a>元素的内容是动态的,因此它的宽度变化,有时内容事件跨越了几行(因为该<a>元素是内<div>谁的宽度是固定的).

我希望>水平位置从最长行的末尾开始.也就是说,当我给它right:0;规则时,它应该在元素的最右边(垂直位置现在无关紧要):

这就是它在FF中的表现方式,但在Chrome和IE中,它>出现在最短行的末尾:

我想知道是什么原因导致了浏览器之间的差异,但更重要的是,我想所有的浏览器表现得像FF -放置:after在最长行的末尾.那可能吗？

我把上面的代码放在dabblet上