rainbow icon indicating copy to clipboard operation
rainbow copied to clipboard

use html tag is wrong

Open zhiqiang21 opened this issue 9 years ago • 1 comments

when i use rainbow occure something not good

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./lib/monokai.css">
</head>

<body>
    <h3>代码示例</h3>
    <pre>
        <code data-language="html">
            <div class="alert-content">
                    <div class="alert-txt">我是内容区域我是内容区域我是内容区是内容区区域我是内容区域我是内容区域</div></div>
                <div class="btn-common alert-form">
                    <div class="btn-cancle">取消</div>
                    <div class="btn-submit">确定</div>
                </div>

        </code>
    </pre>
    <script src="./lib/rainbow.min.js"></script>
</body>

</html>

html end tag not right。 i don't know what to do .

zhiqiang21 avatar Jan 16 '17 06:01 zhiqiang21

Hello, your issues occur because of bootstrap.css. It has .close selector in the global scope.

As for me, quick solution - overwrite all values properties for .class

pre .close {
	float: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-shadow: none;
	filter: inherit;
	opacity: inherit;
}
        
pre .close:focus,
pre .close:hover {
	text-decoration: inherit;
	cursor: inherit;
	filter: inherit;
	opacity: inherit;
}

But stay some issue with close:focus, close:hover. I think that you need just to overwrite manual depending on your theme.

artemhp avatar Feb 27 '17 11:02 artemhp