border های متفاوت در Firefox و Google Chrome...؟! - هفت خط کد انجمن پرسش و پاسخ برنامه نویسی

border های متفاوت در Firefox و Google Chrome...؟!

0 امتیاز

سلام دوستان!

آیا راهی هست که طرحم در این دو مرورگر (Firefox و Google Chrome) به صورت یکسان نمایش داده بشه...؟! می خوام dashed border های یکسانی در این دو مرورگر بگیرم... آیا ترفندی برای این کار هست...؟

 

web design, طراحی وب, ‌border, dashed, css, dashed border

 

کدم به این صورت هست:

index.php

<html>
	<head>
		<title>index.php!</title>
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<div class='body-container'>
			<form action="google.com" method="post">
				<input type="text"/> </br>
				<input type="text"/> <button type="button">چک!</button> </br>
				<button type="button">دکمه ی ۱</button>
				<button type="button">دکمه ی ۲</button>
			</form>
		</div>
	</body>
</html>

style.css

@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	background-image: url('http://www.spacetelescope.org/static/archives/fitsimages/large/danny_lacrue_6.jpg');
	background-color: #cccccc;
	background-size: 1400px;
	font-family: 'Droid Arabic Naskh', serif;
}

input[type=text] {
	background-color: rgba(0,120,100,0.2);
	color: #A7CECD;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	font-size: 16;
	text-decoration: none;
	border: 2px dashed rgba(0, 180, 180, 0.5);
	font-family: 'Droid Arabic Naskh', serif;
	direction: rtl;
}

input[type=text]:hover {
    background-color: rgba(0,120,100,0.5);*/
}

input[type=text]:focus {
	outline: none;
	border: 2px dashed #00B9B4;
}


button {
	background-color: rgba(0,120,100,0.2);
	color: #A7CECD;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	font-size: 16;
	text-decoration: none;
	border: 2px dashed rgba(0, 180, 180, 0.5);
	font-family: 'Droid Arabic Naskh', serif;
	text-indent: 0;
}

button:hover {
	border: 2px dashed rgba(0, 180, 180, 0.5);
    background-color: rgba(0,120,100,0.5);
}


button:focus {
	outline: none;
	border: 2px dashed #00B9B4;
	background-color: rgba(0, 120, 100, 0.5);
}

button::-moz-focus-inner { 
	border: 0;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
     padding: 0 !important;
     border: 0 none !important;
 }

 

سوال شده مرداد 16, 1393  بوسیله ی مسعود لپه‌چی (امتیاز 928)   12 31 50
ویرایش شده دی 30, 1393 بوسیله ی haniye sarbazi
اگر میخوای کاملا یکی باشن چرا با فوتوشاپ border رو نمیسازی بعد از border-image استفاده نمی کنی ؟
سلام!
ممنونم از نظرتون...
اتفاقا با GIMP یه تصویر درست کردم و برای border-image ازش استفاده کردم... خیلی هم خوب شده بود... اما خوب چه طوری می شه به سادگی رنگ border رو تغییر داد...؟! تو CSS با یه خط می شد با روش معمولی... ضمنا یه وسواسی هم که دارم اینه که دوست دارم همه ی کار ها تا جای ممکن فقط با CSS انجام بشه...!

1 پاسخ

+2 امتیاز

اینو تست کنید باید جواب بده:
 

button {
    background-color: rgba(0,120,100,0.2);
    color: #A7CECD;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 16;
    text-decoration: none;


    border:dashed 2px #000000;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomleft:2px;
    -moz-border-radius-bottomright:2px;
    -webkit-border-top-left-radius:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;


    font-family: 'Droid Arabic Naskh', serif;
    text-indent: 0;
}
 
button:hover {
    border:dashed 2px #000000;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomleft:2px;
    -moz-border-radius-bottomright:2px;
    -webkit-border-top-left-radius:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
    background-color: rgba(0,120,100,0.5);
}



 

پاسخ داده شده مرداد 17, 1393 بوسیله ی tux-world (امتیاز 137)   1 1 6
سلام دوست عزیز!
ممنونم از جوابتون... اما ظاهرا مرورگرهای مختلف border ها رو به صورت های مختلف پردازش می کنن و دقیقا از لحاظ ظاهری border ها مثل هم نیستن... با این که کدی که نوشتید باعث می شه در مرورگرهای بیش تری border ها نشون داده بشه... اما مثل هم نشون داده نمی شه... مثلا در Google Chrome خطوط بالا و پایین border در کنار هم قرار گرفتن اما در Firefox به صورت زیگزاگی هستن... شاید باید border ها رو یه جوری خودم تولید کنم؟! آیا راهی هست؟... مثلا با استفاده از border-image...؟!
خوب ببینید این مربوط به رندر کردن اون مرورگره. و فکر نمیکنم بشه کاریش کرد. ولی نکته جالبیه و متوجه شده بودم. فکر نمیکردم منظورتون اون باشه. ولی بازم روش تحقیق میکنم خبر میدم
این لینک رو ببین علت این موردی هستش که شما نیاز دارید:  http://www.impressivewebs.com/comparison-css-border-style/
...