该设计

信息小部件内容应在中间垂直对齐,如下所示:

编码设计

Windows:Chrome 20/FF 14/IE 9

Mac(Lion/Mt. Lion):Chrome/FF

代码

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle; …

该设计

响应式设计上的联系表单具有插入阴影和常规外部阴影的输入字段.见下图.

代码

input {
    background:#fff;
    height:auto;
    padding:8px 8px 7px;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:#fff solid 3px;
    border-radius:4px;
    box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
}

问题

iOS v4 +无法正确显示框阴影.见下图.

经测试

我尝试过使用-webkit-box-shadow.

-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
                   inset 2px 2px 3px rgba(0, 0, 0, .2);

我已经申请display:block;了输入元素.

目前的解决方法

我宁愿不必这样做,但这是我能达到预期效果的唯一方法.

HTML

<p><input /></p>

CSS

p {
   width:50%;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-shadow:0px 0px 5px rgba(0, 0, 0, .35);
   border-radius:4px;
}

    input …

第一次在这里用户.我通常能够找到问题的答案,但我很难搞清楚这个问题.

目标:

我有一个带有侧边栏导航的页面布局,点击后会向下滚动到页面上的元素.但是,如果用户只是将页面向下滚动到特定元素,#id我希望导航中的相应链接成为.active.导航链接和相应的元素通过element#id和共享相同的值a[name].

类似于: NikeBetterWorld.com

HTML示例如下:

<nav>
    <a name="value">Link</a>
</nav>

<section id="value">
    content goes here
</section>

显然,有更多的部分,链接,元素等.但这是它的要点.因此,当用户向下滚动到section#value的a[value]将都获得了积极的类.

我之前在这里找到了一个有所帮助的答案,但我仍然遇到了一些问题.有关更多信息,请参阅此链接.

当前的Javascript/jQuery:

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    var cutoffRange = cutoff + 200;

    // Find current section and highlight nav menu
    var curSec = $.find('.current');
    var curID = $(curSec).attr('id');
    var curNav = $.find('a[name='+curID+']');
    $(curNav).addClass('active');

    $('.section').each(function(){
        if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) {
            $('.section').removeClass('current')
            $(this).addClass('current');
            return false; …