小编Cod*_*onk的帖子

正如标题所示,以下代码的输出在safari浏览器上没有显示:

1)输入类型搜索的边框未显示

2)text-transform:大写不起作用.

其余的浏览器显示确切的输出.请参阅下面附带的图像.

Fiddle

HTML:

<div class="searchLob">
    <input type="search" class="searchInput" placeholder="Search the website"></input>
    <button onclick="Submit();" class="searchInputBtn">Search</button>
</div>

CSS:

.searchLob{
    position: relative;
    display: inline-block;
    }

.searchInput{
    position: relative;
    border: 2px solid #d2d4d8;
    height: 44px;
    padding: 0 10px;
    background-color: #fff;
    width: 200px;
    margin: 2px 0 0 2px;
    float: left;
    text-transform: uppercase;
    }

.searchInputBtn{
    position: relative;
    float: left;
    border: medium none;
    color: #fff;
    cursor: pointer;
    font: 14px 'arial';
    height: 44px;
    margin-left: -4px;
    margin-top: 2px;
    text-decoration: none;
    text-transform: uppercase;
    width: 70px; …

我想要一个带有渐变背景和图像的按钮.这是我到目前为止:

的jsfiddle/D6xKD /

如果您查看按钮,您可以看到渐变仅在图像周围而不是整个按钮.

注意:这个解决方案我从其他参考资料中获取了一个带有渐变背景和背景图像的按钮.

我的问题是:如何使梯度和图像适用于包括ie7及以上的跨浏览器？

HTML:

<button class="button" onclick="submit();" type="button">Text button</button>

CSS:

.button{
    color: #FFFFFF;
    display: inline-block;
    font-family:Arial;
    font-size: 10px;
    font-weight: normal;
    padding: 9px 36px 9px 4px;
    text-decoration: none;
    margin:4px auto auto;
    cursor:pointer; 
    border:0px;
    background: #3ba93d;
    background-position: 66px 4px;
    background-repeat:no-repeat;
    background-image: url(http://goo.gl/mw5HWR); /* fallback */
    background-image: url(http://goo.gl/mw5HWR), -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */
    background-image: url(http://goo.gl/mw5HWR), -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */
    background-image: url(http://goo.gl/mw5HWR), -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */
    background-image: url(http://goo.gl/mw5HWR), -ms-linear-gradient(top, …

固定定位的div(带有文本'Din Score'的栏和其中的苹果)不会停留在页面底部.这个div类scrollingScoreBoard使用的是javascript,它将保持相对于桌面和笔记本电脑的视图,但会移动到移动视图上的固定位置.

但是,在三星Galaxy S和S II上,它并没有停留在底部.

对于这些特定的手机,我该如何将它固定在底部？

真正的工作地点在这里

HTC One X和三星Galaxy S的比较

所以这就是我所拥有的:

HTML:

<div id="scrollingScoreBoard">
    <div class="currentScoreBox">
        <div class="currentScoreText">
            <p>Din Score</p>
        </div>
        <div class="greenAppleContainer">
            <img class="appleGreenActive" src="eimg/blankApple.png" alt="" >
            <img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
            <img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
            <img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
            <img class="appleGreenDefault" src="eimg/blankApple.png" alt="" >
        </div>
    </div>
</div>

CSS:

#scrollingScoreBoard{
    width: 320px;
    color: white;
    position: relative !important;
    bottom: 0px;
    margin:auto;
    text-align:center;
    left:0;
    right:0;
    background-color:#163c15;
    z-index:1000;
    clear:both;
    }

.currentScoreBox{
    position:relative;
    background:url(../eimg/head_bg.png) 0 0 repeat …

正如标题所说,我应该如何垂直对齐: -

需要: - - | - | - -

目前垂直对齐默认为基线.

目前:_ _ | _ | _ _

HTML:

<div class="moduleResult">
    <p>You have
        <span class="moduleCard">88</span>
        out of
        <span class="moduleCard">88</span>
    correct</p>
</div>

CSS:

.moduleResult{
    width:100%;
    }

p{
    font-family:'Arial';
    font-size:20px !important;
    line-height:30px;
    text-align:center;
    }

.moduleCard{
    font-size:60px !important;
    line-height:60px;
    padding:0 4px;
    }

并且文本必须在<div class"moduleResult">中居中对齐

这是小提琴链接