我有这样的HTML代码 -

<div class="bs-example">
    <input type="text" id="typehead" style="width: 500px;" class="form-control" placeholder="accounts" />
    <input type="text" class="form-control" placeholder="accounts" />
</div>

我必须找到具有ID typehead的父元素的宽度.

所以在这种情况下,我必须找到具有类bs-example的div的宽度.

我不能在上部div中使用ID,因此我可以通过ID获得元素的宽度,因为我想要一个可重复使用的代码,因为它应该在页面中的许多位置使用.

我所做的是 -

function myFunction()
{
    var x = document.getElementById("myLI").parentNode.parentElement.width;
    document.getElementById("demo").innerHTML = x;
}

但它没有用.

注意:这个问题是关于输出的问题,而不是关于任何形状的创建.

我最近创建了一个形状:

.prog {
    position: relative;
    top: 20px;
    width: 150px;
    height: 120px;
    background: green;
    display: inline-block;
    transform: skewY(20deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}
.prog:before {
    content: "";
    position: absolute;
    left: 150px;
    width: 150px;
    height: 120px;
    background: red;
    transform: skewY(-40deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}

<div class="prog "></div>

在上面的片段中,绿色形状是.prog元素,并且是倾斜的.红色形状是:before第一个元素的伪元素.

我倾斜.prog(偏斜)到20度.现在,我需要:before-20deg.为此,我首先不得不疏忽它.然后将它进一步倾斜20度.
所以最终的skewY价值是-40deg.我应用了这个,并适当的transform-origins.

但问题是两个形状的顶点都没有对齐.他们应该,但他们不是.这是显示问题的图像:

黑色线条仅供参考.

现在更多!

我倾斜-20 -20而不是 …

我看到这篇文章http://tympanus.net/Tutorials/BorderAnimationSVG/

我想在我的WP博客中添加这个.这样每个新的post div都会在其边框上显示这个动画.但问题是它在SVG中.无论如何我可以在不使用SVG的情况下使这个动画工作,我也不想使用javascript.

让我们说代码是:

.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

<div class="go"></div>

背景

(之前有人问 过,很多次,我知道.但是,它似乎每次都是由不同的事情引起的.我已经完成了四个不同的StackOverflow答案线程并尝试了所有内容.似乎没有什么工作了,所以我相信这是一个新问题.)

无论如何,我有一个HMTL元素,背景图像需要修复,使用 background-attachment:fixed;

• 所有桌面浏览器 - Works
• 移动Firefox - 工作
• 默认Android /三星浏览器 - 工作
• 移动Chrome - 无效

我已经将问题转换为更简单的可复制测试,这是一个单独的section元素,设置为200%页面高度,背景是全屏和固定的.

码

html,body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section {
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
    background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
    height:200%;
    width:100%;
}

<section>Test</section>

JSFiddle For Testing

为了便于在智能手机上进行测试而不是代码片段:http://jsfiddle.net/LerLz1L2/

我试过的事情

• backface-visibility: hidden;
• -webkit-backface-visibility:inherit;
• -webkit-transform: translate3d(0,0,0);
• 设置元素和所有父母 position:static

我在移动版Safari 8.1版上遇到了表单字段的问题.这似乎是移动版Safari 8的所有版本的错误.

当您在输入中键入文本并且该文本比输入本身长时,光标会在您键入时保持向右移动 - 这是正确的.问题是,当您按住选择并尝试向左移动到隐藏的文本时,您无法滚动.同样,如果在输入外部选择,则无法向右滚动以查看隐藏文本.

您唯一的选择是选择全部并删除.

这个问题的解决方法是什么？我上传了一个包含不同输入类型的示例页面,所有这些行为都存在.

小提琴:http://jsfiddle.net/b7kmxaL6/(访问移动游猎)

<form action="">
    <fieldset>
        <input type="text" class="text">
        <input type="email" class="email">
        <input type="password" class="password">
    </fieldset>
</form>

我正在尝试使用CSS属性clip-path,但我Invalid property value在Chrome中遇到错误.

这是一个小型演示:

.clip-me {  
  clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

注意:这与剪辑路径上的这个问题不同,不适用于chrome,因为它特别询问如何使用SVG(而不是CSS)应用剪辑路径

根据我可以使用,它应该在chrome中工作.

我正在使用bootstrap 3和jQuery.我现在在我的页面上有一个div,它是500 x 400,它位于bootstrap行和col div之内.例如:

 <div class="row">
      <div class="col-lg-12">
           <div id="myDiv"></div>
      </div>
 </div>

我想用jQuery告诉这个div全屏.当我点击我的按钮使其全屏显示时,它似乎被锁定在引导行内部并且在父div内部达到100%x 100%.无论如何都要告诉#myDiv从它所在的父级弹出并全屏显示.

我的css:

 #myDiv{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
 }

我有一个网站,其图像具有src属性,我想用我自己的图像更改该图像的src位置.图像存在于div组件中.我无法更改HTML,我正在寻找使用CSS更改它的方法.

Div组件:

<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="image.svgz">
</div>

图像组件(CSS文件):

.application-title IMG
{
    float: left;
    margin-top: 5px;
    margin-right: 10px;
    opacity: 1;
    margin-left: 0px;
    visibility: hidden;
}

我正在努力学习材料ui.我想在我的页面上放大文本字段.但是,我使用该字段嵌入的样式会更改高度,宽度和除大小之外的其他属性.以下是我的代码:

const styles = {
container: {
    display: 'flex',
    flexWrap: 'wrap',
},
textField: {
    // marginLeft: theme.spacing.unit,
    // marginRight: theme.spacing.unit,
    width: 300,
    margin: 100,
    fontSize: 50 //??? Doesnt work
}
}

以下是无状态组件(React):

const Searchbox = (props) => {

    const { classes } = props;

    return (
        <TextField
            onKeyDown={props.onKeyDown}
            id="with-placeholder"
            label="Add id"
            placeholder="id"
            className={classes.textField}
            margin="normal"
            autoFocus={true}
            helperText={"Add an existing id or select "}
        />
    );
};

export default withStyles(styles)(Searchbox);

我完全理解没有火箭科学作为JS应用样式的简单CSS.

但是,我无法覆盖文本字段的基本字体大小.任何帮助将不胜感激

我想让这张卡在悬停时缩放(包括其中的元素),但文本在转换过程中摇摆/抖动(当你悬停卡片时)并在缩放期间和之后变得模糊(有时,某些比率比其他比例更高) ,我认为是由于子像素值四舍五入).

如何在转型过程中消除这种摇晃和模糊？

• 我不关心IE浏览器,我只想让它在最新的Chrome中运行.

• 它似乎是由transition财产造成的.

Codepen#1: https ://codepen.io/x84733/pen/yEpYxX

.scalable {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}
.scalable:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);  
}

.card {
  width: 100%;
  background: white;
  padding: 20px;
}

body {
  width: 50%; 
  height: 100%; 
  background: #999;
  padding: 20px;
}

<div class="card scalable">
  <div>here's some description</div>
</div>

更新:

我刚刚发现,当你以编程方式为它设置动画时,它不会抖动/抖动:

我能以某种方式使用JS吗？

Codepen: https ://codepen.io/anon/pen/LqXwOb ？editors = 1100

.anim {
  animation: scale 0.3s ease-in-out infinite alternate;
}

@keyframes scale { …