小编Jos*_*ell的帖子

这是我的猫/动画的JSFIDDLE,没有任何 drop-shadows尽可能清楚地显示问题.根据我的理解,这是由于border-radius和可能由于overflow: hidden;.

猫头鹰不是这个问题的例子,只是我所处的类似情况的一个例子.这个问题是jsfiddle/cat,抱歉混淆了!

这是我的猫的JSFIDDLE,带有使用blura属性的插入框阴影,box-shadow并且像素化边缘在眼睛周围仍然是相同的.

这里的答案确实解决了我用猫头鹰图像看到的内容,但没有解释这个答案的内容.

这是inset box-shadow使用第三个值的一段时间的猫,blur.

我在Safari,Chrome和Firefox中测试了这个小提琴,它们似乎都显示相同.

我在Cheshire Cat上有两只眼睛,我昨天开始使用CSS.一切都渲染得非常好,我也制作了一个猫头鹰(我首先认为这是一个类似的情况,但它不是)出于CSS,在边缘像素化的眼睛上有一个非常小但类似的问题.

我也尝试给眼睛一个紫色的边框,但像素化的边缘在边缘边缘保持不变.

在我的新CSS创建中,眼睛的外边缘非常像素化,并且似乎是父圆的颜色(黄色).

这是眼睛的CSS.

.eye {
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background: #FAD73F;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: inline-block;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.pup {
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background: …

这不行,应该吗？或者,如果另一行可以执行相同操作,您可以停止错误:

function doTheHighlightning(searchTerms) {
    // loop through input array of search terms
    myArray = searchTerms.split(" ");
    for(i=0;i<myArray.length;i++)
    {
        // works. this line works if not out commented. Will highlight all words, also in the hidden elements
        //$('tbody').highlight(myArray[i]);

        // not working when trying to skip elements with display none...
        $('tbody').css('display') != 'none').highlight(myArray[i]);
    }

    // set background to yellow for highlighted words
    $(".highlight").css({ backgroundColor: "#FFFF88" });
}

我需要过滤表格中的行并为某些单词着色.如果选择了很多单词,数据已经成为着色的方法.因此,我将尝试通过仅通过无隐藏元素来限制着色.

我得出结论,这是一个仅限android的问题,是由我的导航菜单的工作方式引起的,并且我的想法已经用完了.菜单从左侧100%按下以隐藏菜单.然后我使用css过渡使菜单从右侧滑出到窗口的80%.切换菜单后,它会在菜单隐藏的右侧留下一个空旷的空白区域.我不能用display:none; 因为它会杀死动画.重要问题只有切换菜单后才会出现问题.

我试过了:

• 所以Q1

• SO Q2

• SO Q3

• 所以Q4

• 溢出身体,html,包装器,.searchCont等等.

2014年2月6日更新

这是导航菜单css:

ul.subNav {
    position: absolute;
    top: 70px;
    left: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    visibility: hidden;
    width: 80%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

结束更新

这是css:

.wrapper {
    max-width: 100%;
    height: 100%;
    background: #20aad7;
    background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%);
    background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), …

我一直在研究新的土坯CSS Shapes,但遗憾的是无济于事.

由于我的浏览器只支持20%(应该仍然支持我正在使用的),我想我会开始解决这个问题并尝试新的东西.

我试图将图像放在文本的中心,让文本从顶部拥抱图像.如果您添加margin-top到#circle-left/ #cirlce-right你会看到上面的图片只是空白的空间,这里是一个的jsfiddle.

如果您想试用,CSS Shapes请点击此链接,然后按照步骤在浏览器上启用它们.

本节不是规范性的.

形状定义可用作CSS值的任意几何.此规范定义了用于控制元素浮点区域几何的属性.shape-outside属性使用形状值来定义浮动的浮动区域.

注意:CSS形状的未来级别将允许在浮动之外的元素上使用形状.其他CSS模块也可以使用形状,例如CSS Masking [CSS-MASKING]和CSS Exclusions [CSS3-EXCLUSIONS].

注意:如果用户代理同时实现CSS形状和CSS排除,则shape-outside属性定义排除的排除区域.

注意:未来级别的CSS形状将定义一个shape-in​​side属性,该属性将定义一个形状以包含元素内的内容.

我已经以各种方式达到了我想要的效果,除了我无法将文本包裹在图像/容器上方.我已经使用margin,padding,top,和定位它relative.

这是我的CSS,(JSFIDDLE)

html, body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

#circle-left {
    shape-outside: circle(50% 50% 50%); /* CSS Shapes, my browser is not supporting this sadly */
    float: …

我刚刚将网站从我的工作文件切换到服务器.

当我将它上传到我的投资组合时它工作正常但是一旦它在正确的域上它就停止了工作.图像,而不是显示,只显示空白,所以我尝试去它的直接网址.

而不是它的工作,它下载图像而不是显示它.

这是直接网址:直接网址

我的标签: <img src="images/login_header.svg" alt="Alright, lets start finding discounts!" />

我的结构:

// root (BBCM)

//// images

////// login_header.svg

//// css

//// js

// end root

我试过了:

• /images/url.svg

• 图像的直接网址

• BBCM /图片/ url.svg

当它在我的投资组合上时它工作正常,但在正确的域上没有.

有任何想法吗？当图像下载时,它也显示正确的图像,所以我在这里有点迷失.

我在使用复选框选择一个或多个数据字段以供 PHP/AJAX 处理和显示时遇到问题。我的 PHP/AJAX 在我的<select>s上运行良好，但是一旦我尝试设置复选框，所有的坏消息都会丢失。

我也非常不确定如何进一步防止网站上的 SQL 注入，所以如果有人能告诉我更多关于这方面的信息，我将不胜感激！我阅读了提供的链接，只是不明白bid_param或 PDO 是如何工作的。

ajax 脚本：（我似乎无法插入 ajax/js 所以我会留下一个指向实时站点的链接）

链接到代理搜索页面

我的显示数据的 php 页面：

<div id="bodyA">
    <h1>Find a Local OAHU Agent.</h1>
    <!-- This is where the data is placed. -->  
</div>
<div id="sideB">
    <div class="sideHeader">
        <em>Advanced Search</em>            
    </div>
    <form class="formC">
        <label for="last">Last Name</label><br />
        <select id="last" name="Last_Name" onChange="showUser(this.value)">
<?php 
    include 'datalogin.php';

    $result = mysqli_query($con, "SELECT DISTINCT Last_Name FROM `roster` ORDER BY Last_Name ASC;");
    echo '<option value="">' . 'Select an Agent' .'</option>';
    while …

我很抱歉,如果这是一个愚蠢或简单的问题,但我对Javascript/jQuery相当新.在过去的一个月里,我真的开始深入研究脚本领域,并且已经看到了人们var在Javascript/jQuery中使用的两种不同,也许是三种方式.

我使用var的方式是这样的,

var nav = $('nav');

nav.hide();

我见过人们使用vars的一种非常常见的方式,

var nav = $('nav');

$(nav).hide();

从答案,

var $nav = $('nav');

$nav.hide();

从我通过Google搜索中学到的内容,您在变量中输入的内容将保存在那里以供日后使用.然后我想到如果我在使用它时在var周围写了$(),它会复制$().然而这两种方式似乎都有效,所以我知道它不会复制它,因此可以说它是一回事.

是否有正确的使用方法vars或两者都相同并且无关紧要？

如果这是一个已知的答案,我再次道歉,如果有人能告诉我原始问题但我找不到任何内容,我会很乐意将其删除.

从答案中得到的大量信息我并未将其标记为答案,但我认为非常重要.

var element = document.createElement("div");
$("body").append(element);
$(element).hide(); 

在上面的示例中,$(element)是必需的,因为它接受DOM对象并将其转换为jQuery选择器.jQuery函数只适用于jQuery选择器,所以你不能简单地做element.hide().

我已经input[type="submit"]在这个JSFIDDLE中隔离了我.

代码也是,

input[type="submit"] {
    width: 100%;
    height: 40px;
    background: #FFD100;
    border-radius: 5px;
    box-shadow: 0 5px 0 #A58B1E;
    border: none;
    font-size: 20px;
    color: #2b2b2b;
    cursor: pointer;
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

input[type="submit"]:active, input[type="submit"]:focus {
    box-shadow: 0 3px 0 #A58B1E;
    top: 2px;
    outline: none;
}

当我在iphone上查看网站时,一切看起来都很棒.由于我的客户想要一个响应式网站,我认为我制作的这个按钮在每台设备上看起来都很棒.

哦,小伙子,我错了,因为在我的iphone上按钮真是太可怕了.我将图像包含在移动视图的外观和网站的网址中.

任何想法为什么会发生这种情况或我如何覆盖它？

(Chatfield Drilling实时网站)

我的 WordPress 有问题，我已经创建了所有需要的文件，包括 style.css index.php 等，但页面没有样式。在标题中，除其他外，我把这个

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="text/css" href="<?php bloginfo('template_url'); ?>/css/style.css" />

现在我有一个位于顶部的栏,这里是CSS它:

#header_bar { 
  background: #000000;
  height: 60px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10020;
}

我的问题是,当页面滚动时,我如何使这个栏变得透明？

我应该以某种方式使用不透明度选项吗？

提前致谢!

我已经在这方面工作了一个星期左右,我有一个有效但不太好的解决方案.

我有一个隐藏的页脚,上面有一个像按钮一样的标签.单击此按钮后,我的页脚将向上滑动并同时按下该按钮.

我的问题来自于我无法将我的按钮放在页脚内.由于页脚被隐藏直到被点击,因此该按钮也将被隐藏.

我尝试过的一种方法是不使用隐藏页脚,而是bottom在其上放置一个负片以隐藏它直到被点击.这很好用,但是一旦点击它就可以向下滚动,之后就不会被隐藏了.

然后我决定隐藏/显示它,但这是按钮出现问题的地方.由于页脚是隐藏的,我不能将按钮放在页脚内.由于按钮位于他的页脚之外,我试图为它设置动画,但它不会同时生成动画,这非常奇怪.

我做的最终解决方案是使用css3缓动,但它仍然不完美甚至可用,因为它是如何不刷新.

我试图在准确的时间制作两个动画,同时看起来好像它们是一个对象.

这是我的 HTML

<span class="fTab">Open Footer</span>
<footer>
</footer>

这是我的 CSS

footer {
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  background: rgba(0, 0, 0, 0.69);
}

.fTab {
  width: 15%;
  height: 4em;
  position: absolute;
  bottom: 0;
  left: 2em;
  display: block;
  background: rgba(0, 0, 0, 0.69);
  color: #c1c1c1;
  line-height: 4em;
  text-align: center;
  font-size: 1.2em;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: …

我一直在使用这样的东西<a href="myURL.php" target="blank">Some text</a>,差不多3年了,我想确保我做的事情非常违法.

在查找了一些信息之后,我开始注意到它所说的一切target="_blank".这开始引起我的一些担忧,我可能需要回过头来处理我所做过的所有网站并进行更改_.

当我通过验证器运行它时,它不会导致错误,甚至不会通知我有关它的警告.

我的问题:

1. 这是针对guidlines不使用_,下划线？

2. 如果这违反了指导原则,为什么它不会导致错误,为什么它会起作用？

作为旁注,我找不到关于此的更多信息,但我至少找到了链接的规格.

我想设置一个网页背景图像,以便与浏览器窗口一起缩放,这样它就不会失去原有的宽高比(变得拉伸),从而图像本身基本保持居中.在窗口达到足够小的尺寸后,我希望图像在左侧和右侧都溢出(消失),而不是仅在右侧,因为默认情况下图像是绝对定位的.

这是我现在正在做的一个例子:http://jsfiddle.net/S59EW/2/

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

(图片必须位于一个div内,因为我正在使用的一些javascript适用于它.)

如果您调整jsfiddle窗口的大小,您将看到只有在窗口不太高时图像才会保持其宽高比.然后垂直拉伸图像.

如果你删除"高度:自动"你会得到相同的东西,除了图像停止在某一点后调整大小并消失在右/底侧而不是在顶部/左侧.

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  top: 0;
  left: 0;
}

所以,我需要:

背景图像始终占据整个窗口而没有滚动条.图像始终保持纵横比.在某个浏览器大小阈值之后,图像溢出到左侧和右侧,使其基本保持居中.

感谢大家