小编Joe*_*ier的帖子

在浏览器窗口(或电子邮件客户端预览窗格)中居中HTML电子邮件内容的最佳方法是什么?

我通常使用CSS规则margin:0 auto和960容器作为基于标准浏览器的内容,但我是HTML电子邮件创建的新手,我有以下设计,我现在想要在浏览器窗口中居中,而不使用标准CSS .

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

我似乎记得在某个地方看到它也可以通过将你的电子邮件表设计包装在一个外部表设置为width:100%text-align:center在tbody或类似的东西上使用一些内联样式来实现它?

这是最好的做法吗?

html-email css-tables

86
推荐指数
7
解决办法
16万
查看次数

如何编写正则表达式以匹配任何三位数值?

我正在使用我继承的一些非常时髦的HTML标记,我需要从大约72个td元素中删除以下属性.

sdval="285"
Run Code Online (Sandbox Code Playgroud)

我知道我可以在我的代码编辑器中使用find/replace来做到这一点,除非因为每个属性的值以5度的增量不同,所以如果没有正则表达式,我无法将它们全部匹配.(仅供参考我使用的是Esspress,它支持RegExes的查找/替换工具)

唯一的麻烦是,我真的无法弄清楚如何为这个值写一个RegEx.我理解RegExes的概念,但实际上不知道如何使用它们.

那么我如何用正则表达式代替数字来编写以下内容,以便它匹配任何三位数值?

sdval="285"
Run Code Online (Sandbox Code Playgroud)

regex

19
推荐指数
3
解决办法
6万
查看次数

shell脚本创建静态HTML目录列表

所以我正在创建一个GitHub Pages网站,列出我的jglovier/gifs repo 中的所有Gif.GH Pages仅运行静态HTML/CSS/JS或Jekyll,因此我无法使用apache目录列表或任何其他服务器生成的变体.

所以我想做的是在命令行上运行一个脚本,让它浏览目录的根目录,列出里面的所有文件(只有一层深度),然后输出到html ul > li > a结构,或类似的东西对此:

root/
|
??? accidents/
|   ??? accident2.gif
|   ??? accident3.gif
|   ??? accident4.gif
??? bears/
|   ??? bears1.gif
|   ??? bears2.gif
|   ??? bears3.gif
??? cats/
    ??? cat1.gif
    ??? cat2.gif
    ??? cat3.gif
Run Code Online (Sandbox Code Playgroud)

我希望href值是站点根相对路径(即构建时的href="/cats/cat.gif ), and I need it to output into_includes/site-index.html , which will get pulled into a Jekyll layout file that wraps around myindex.md file and generatesindex.html`.

发现这个 …

bash shell

12
推荐指数
2
解决办法
1万
查看次数

为什么Firefox渲染虚线边框彼此错位?

http://betawww.helpcurenow.org/about/financial-accountability/

http://blog.helpcurenow.org/

我正在使用一个包含大量1px虚线边框的设计.我注意到Firefox中有些奇怪的东西.通常情况下,Firefox会像我期望的那样呈现所有内容(*差不多),并希望看到它.但是,使用虚线边框时,如果使用彼此接近的两个虚线边框,则会显示它们未对齐.

我的意思是,我有几个对象说1px底部边框,2px底部边距,然后下一个对象有一个1px顶部边框 - 基本上创建双边框的效果.

在Safari,Chrome和IE中查看所述效果时,"双虚线边框"效果看起来很棒.然而在Firefox中,他们的虚线不排队(没有双关语意).

我确定这只是一个关于Firefox如何呈现虚线边界的故障,但我想知道为什么,如果有人知道的原因.

您将在上面的两个URI中看到效果.第一个有一个侧边栏框,标题使用此效果.第二个(我们的博客)全部使用这个效果,但最突出的是你会看到每个帖子标题,下面的副行也使用效果.

css firefox border

10
推荐指数
1
解决办法
1050
查看次数

:最后的孩子风格工作,:第一个孩子的风格不工作!为什么?

我通过在段落上使用浅色边框作为边框顶部,并在其上使用黑色边框作为边框底部,在段落之间创建插入边框效果.

我正在尝试使用p:first-child删除第一段上的顶部边框,而p:last-child则删除底部边框上的边框.(他们有一类"介绍"fyi).

删除:last-child上的底部边框的样式工作正常,但由于某种原因,删除:first-child上的顶部边框的样式不是.

它必须是一个错字或一些愚蠢的东西,因为我无法弄清楚它为最后一个孩子而不是第一个孩子工作的原因.

http://joelglovier.com

markup:

<div id="intro">

    <div class="wrap">

        <h1 class="intro">Hi! I'm <a href="http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=Joel+Andrew+Glovier">Joel Andrew Glovier</a></h1>

        <p class="intro">I'm a <a href="http://www.jagdesignideas.com/portfolio/web.html">web designer</a> and <a href="http://en.wikipedia.org/wiki/Front_and_back_ends">front-end developer</a>, currently working for <a href="http://cure.org">CURE International</a> full time. I also do some <a href="http://www.jagdesignideas.com">freelance work</a>, I <a href="http://twitter.com/jglovier">tweet a little</a>, <a href="http://www.jagdesignideas.com/blog/">blog</a> & can be found on <a href="http://jagdesignideas.com/contact.html">other social media</a>. I have <a href="http://dribbble.com/players/jag">lots of projects</a> going on at once - and I like it that way.</p>

        <p class="intro">I'm a <a href="/good-news">follower …
Run Code Online (Sandbox Code Playgroud)

css css-selectors

10
推荐指数
1
解决办法
1万
查看次数

Webkit因使用webkit-transition渲染多个文本阴影和框阴影值而窒息

CSS3 -webkit-transition对多个box-shadow值和text-shadow值造成阻塞.(Chrome和Safari)

更具体地说,我有两个场景......

  1. 我的文本有一个文档标题,有三个文本阴影(深度的外观).我还使用-webkit-transition规则来改变悬停时文本阴影的颜色,使其在悬停时看起来发光.

  2. 我有链接,我正在以与上面相同的方式使用盒子阴影规则,有三个深度效果值.此处还使用-webkit-transition来更改悬停效果的按钮和文本的颜色.

问题:对于上述两个实例,当悬停在元素webkit上时,似乎一次一个地呈现转换,因此值不会同时淡入其新值.相反,它们会在每个渲染时出现 - 一个接一个,这是一个非常尴尬的过渡,你会看到.

我有几个实例,这里有一些链接:( 确保在Chrome或Safari中查看)

- 文本阴影过渡:悬停在第h1页("治愈礼物"文本):http://cure.org/goh

-Box-shadow转换:悬停第一次幻灯片调用操作("阅读更多"按钮):http://cure.org

-Box-shadow过渡:悬停于页脚导航链接(关于,Rods等):http://tuscaroratackle.com

最后,这里是我正在使用的代码的示例:( 不是来自任何网站,只是我为此问题构建的示例;请在此处查看:http://joelglovier.com/test/webkit-shadow-transition-bug .html)

<!DOCTYPE HTML>
<html>

<head>
<style type="text/css">

ul {
    overflow:hidden;
    width:500px;
    height:auto;
    margin:50px 100px;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(0,0,0,1);
    -webkit-border-radius:10px;
    -webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
    -webkit-transition:all .5s ease;
}

ul:hover {
    -webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
    display:inline-block;
}
a:link,a:visited {
    float:left;
    display:block; …
Run Code Online (Sandbox Code Playgroud)

css webkit css3 css-transitions

6
推荐指数
1
解决办法
3440
查看次数

我的网站一直在崩溃Safari(桌面和iOS)

我的网站http://remotejobs.io一直崩溃Safari.我第一次注意到昨晚我在Verizon商店时的崩溃,我尝试在iPad上浏览器测试该网站.所以我在同一家商店再试了两台iPad,并且每次尝试点击域名时,该网站都会在所有3个版本上崩溃iOS Safari.

确切的工作流程是:

  1. 打开Safari
  2. 输入http://remotejobs.io

而已.一旦你击中网站就崩溃了.

这也发生在桌面Safari上(仅在OSX 10.8.3上的6.0.3中测试),并且每次都会生成错误报告.以下是生成的错误报告之一的副本:http://go.jag.is/OGcS

该网站没有抛出任何JS错误,并且在我测试过的其他现代浏览器上运行良好,包括Chrome,Firefox甚至IE9(令人震惊).

但有一件奇怪的事情是,它似乎只会让iPad上的iOS Safari崩溃,而不是iPhone,因为我每次都可以在iPhone上成功加载网站.

究竟是什么造成了这种情况,我该如何调试呢?

更新: 我尝试评论主样式表,并且该站点不再在没有样式表的情况下崩溃Safari.我尝试了常规样式表和缩小样式表,并且都使浏览器崩溃.

更新2: 我通过注释掉JS并将CSS留在CSS中将其缩小到CSS,但它仍然崩溃了.然后我尝试删除所有过渡属性,它不再崩溃.显然,过渡属性导致了崩溃.

crash safari mobile-safari

6
推荐指数
2
解决办法
8166
查看次数

在png的url之前使用CSS background属性中的"透明"值有什么好处?

我经常看到样式表写在你有这样的东西:

#anyelement {
  background:transparent url(../img/filename.png) no-repeat left top;
}
Run Code Online (Sandbox Code Playgroud)

有问题的值是"透明"值 - 使用此值的好处是什么?我从来没有真正使用它与我自己的CSS文件和我的PNG图像似乎仍然适用于所有支持PNG的浏览器.

任何人都可以对这个值的使用有所了解吗?

谢谢!

css png transparent css-selectors

5
推荐指数
1
解决办法
889
查看次数

Webkit浏览器渲染CSS与Mozilla Firefox不同......为什么?

我正在设计一个已经标记过的表单(进行了一些标记更改),我通常在Firefox中工作,因此我可以使用firebug和Web开发人员工具栏.

在这个项目中,我注意到我的样式在基于webkit的浏览器Chrome和Safari中的某个特定区域(几个元素)的显示方式与Firefox相比(我们甚至不会进入Internet Explorer,尽管它支持Firefox)显示).

我无法弄清楚为什么风格的显示方式如此不同.通常有一些规则,我忽略了Firefox只是理所当然,其他人需要它指定.但在这里,我不明白为什么它以这种方式显示.特别是我指的是表单的底部区域,用户可以在其中输入联系信息,然后提交表单.我会附上屏幕截图,以便参考差异.

这是URL,所以请随意查看.虽然被告知这是一个生产页面(已经发布),所以如果您试用该表格,您将被添加到CURE的联系人数据库中.

http://www.helpcurenow.org/survey2010

这是屏幕截图:

Firefox(我打算看的方式)alt text http://static.helpcurenow.org/images/test/firefox.jpg

Chrome,然后是Safari - 奇怪的更改提交按钮alt文本http://static.helpcurenow.org/images/test/chrome.jpg alt text http://static.helpcurenow.org/images/test/safari.jpg

作为奖励,如果有人想帮助我搞清楚为什么IE7只想显示问题背后的背景,以及如何解决这个问题我会非常感激!

非常感谢.

css safari firefox webkit google-chrome

5
推荐指数
1
解决办法
5583
查看次数

如何获得符合列表样式类型样式规则的HTML定义列表?

所以我正在标记客户的网页设计.该页面是常见问题解答页面,其中每个常见问题解答部分都有一个问题和答案列表.此方案的最合适的语义标记是html定义列表.

客户端的模型还会在每个问题/答案对旁边显示数字,例如有序列表.

所以我自然认为我只是用<dl>元素标记内容,并使用CSS添加list-style-type: decimal.但是,这完全被忽略了.

是因为<dl>元素不能接受列表样式吗?这看起来非常倒退,因为它毕竟是一个列表元素!

或者我的标记做错了什么?

这是我的代码CSS和HTML的一个例子:

dl { list-style: decimal; }
Run Code Online (Sandbox Code Playgroud)
<dl class="some-list">

  <dt><strong>Q</strong>: How Do I Do Some Thing?</dt>
  <dd><p><strong>A:</strong> You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this: You just do it, okay? Want a longer explanation? Try this:</p>
  </dd>

  <dt><strong>Q</strong>: How Do I Do Some Other …
Run Code Online (Sandbox Code Playgroud)

css

5
推荐指数
1
解决办法
1871
查看次数